Сова Карусель действительно работает без фиксированной ширины?

Question

Я использую карусель совы 1.3 на страницах, которые обычно имеют контейнер-упаковщик, который устанавливает ширину 1200 пикселей.

Я начал создавать отзывчивые сайты и теперь не использую фиксированную ширину на любых обертках, я также использую версию 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% ширины экрана, он будет игнорировать ширину Col-мкр-8 на 66%, так что я в конечном итоге с сломанная схема.

Является ли сова карусели действительно отзывчивым или вам нужно исправить ширину, чтобы она работала?

Answer 1

Я знаю, что это старая проблема, но я поместил ее с оберткой и маленьким кодом jQ. Owl-carousel не поддерживает класс bootstrap «container-fuild», и, когда вы используете этот класс для совы, будет разбиваться ширина вашей страницы, поэтому вам нужно установить ширину обертки.

Помните, что добавить мероприятие изменить размер.

Мой HTML (DIV с классом совой-обертке, используемой в JQ):

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