Question

我一直在页面上使用owl carousel 1.3，这些页面通常有一个包装容器，将宽度设置为1200px。

我开始构建自适应网站，现在不在任何包装上使用固定宽度，我也使用Owl的第2版。

我正在使用引导网格布局并尝试使我的猫头鹰轮播响应。但是，我不能让它工作，它似乎只有在父div上设置宽度才有效。

例如，如果我有这个：

    <div class="container-fluid">
    <div class="row">
    <div class="col-md-8">
<div class="owl-carousel">
<div><h2>Item 1</h2></div>
<div><h2>Item 2</h2></div>
<div><h2>Item 3</h2></div>
</div>
    </div>
    <div class="col-md-4">
<h2> Just a right hand panel</h2>
    </div>
</div>
</div>

猫头鹰滑块将占据屏幕宽度的100％，它会忽略66％的col-md-8宽度，因此我最终会出现断页。

猫头鹰旋转木马是否真的有响应，或者你必须为它确定宽度吗？

Answer 1

我知道这是一个老问题，但我用包装器和小jQ代码解决了它。 Owl-carousel不支持bootstrap类“container-fuild”，当你将这个类用于owl时，会崩溃你的页面宽度，所以你需要设置包装器的宽度。

请记住添加调整大小事件。

我的HTML（在jQ中使用类owl-wrapper的div）：

<section class="container-fluid">
    <div class="owl-wrapper">
        <div class="row">
            <div class="col-md-8">
                <div class="owl-carousel owl-theme ">       
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                </div>
            </div>
        </div>
    </div>
</section>

jQuery文件：

$(document).ready(function($){  
 var windowWidth = $( window ).width();
 $('.owl-wrapper').css('width', windowWidth);

  $('.owl-carousel').owlCarousel({
    loop:true
 });
});

Answer 2

尝试将min-width : 100%放在父容器上。

猫头鹰旋转木马真的没有固定的宽度吗？

2 个答案: