twitter-bootstrap - 我如何让我的引导轮播全屏（高度）？

Question

我正在这个网站上工作：barebands.com（所有代码都可以在那里查看）。我正在尝试使引导轮播跨越屏幕的整个高度（并会根据此自动调整内容的大小）。我环顾了类似的问题，但无法找到有效的解决方案。

谢谢您的帮助。

Answer 1

这是一些代码：

    $(document).ready(function(){
    function sliderFullScreen(){
        var windowHeight = $(window).height();
        $('.main-slider').css('height',windowHeight);
        $('.main-slider .item, .main-slider .item.active').css('height',windowHeight);
        $('.main-slider .carousel-inner').css('height',windowHeight);
    }
    sliderFullScreen();
    $(window).resize(function(){
        sliderFullScreen();
    });
});

这个对我有用 ：）

我取了窗口的高度并使滑块高度相同，我将其添加到一个函数中以使其具有响应性，因此它会在重新调整窗口大小时重新计算。

Answer 2

添加以下几行 CSS，以便轮播图片和轮播容器填充用户的整个可见区域。

.carousel, .item, .active { 
    height:100%;
}

.carousel-inner { 
    height:100%;
}