Funktioniert das Eulenkarussell wirklich ohne feste Breite?

Question

Ich habe Eulenkarussell 1.3 auf Seiten verwendet, die im Allgemeinen einen Wrapper-Container haben, der die Breite auf 1200px setzt.

Ich habe angefangen, reaktionsschnelle Seiten zu erstellen und benutze jetzt keine feste Breite auf irgendwelchen Wrappern, ich benutze auch Version 2 von Owl.

Ich verwende das Bootstrap-Gitter-Layout und versuche, mein Eulenkarussell ansprechbar zu machen. Allerdings kann ich dies nicht zum Funktionieren bringen und es scheint, dass es nur funktioniert, wenn Sie eine Breite auf ein Eltern-Div setzen.

Zum Beispiel, wenn ich dies:

<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> 

Die Eule Schieber werden 100% der Bildschirmbreite einnehmen, wird es die col-md-8 Breite von 66% ignorieren, so dass ich mit einem Ende gebrochenes Layout.

Ist Eulenkarussell wirklich reaktionsfreudig oder müssen Sie eine Breite daran befestigen, damit es funktioniert?

Answer 1

Ich weiß, das ist ein altes Problem, aber ich liebte es mit Wrapper und wenig jQ-Code. Owl-carousel unterstützt die Bootstrap-Klasse "container-fuild" nicht, und wenn Sie diese Klasse für owl verwenden, wird die Breite der Seite zusammenbrechen, sodass Sie die Breite des Wrappers festlegen müssen.

Merken add resize event.

Mein HTML (div mit der Klasse owl-Wrapper in jQ verwendet):

<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-Datei:

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

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