Question

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

感谢您的帮助。

Answer 1

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

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

.carousel-inner { 
    height:100%;
}

Answer 2

以下是一些代码：

    $(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();
    });
});

它适用于我：）

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

我如何使我的自举旋转木马全屏（高度）？

2 个答案: