2

我一直在通常具有将宽度设置为 1200 像素的包装容器的页面上使用 owl carousel 1.3。

我开始构建响应式网站，现在不在任何包装器上使用固定宽度，我也在使用 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>

owl 滑块将占据 100% 的屏幕宽度，它会忽略 66% 的 col-md-8 宽度，所以我最终会得到一个损坏的布局。

owl carousel 是否真的响应迅速，或者您是否必须为其固定宽度才能使其正常工作？

4

2 回答 2

0

我知道这是个老问题，但我用包装器和小 jQ 代码解决了它。Owl-carousel 不支持引导类“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
 });
});
于 2017-05-17T13:43:09.397 回答
0

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

于 2019-10-31T15:45:14.923 回答