Eulenkarussell - automatische Breite, letzter Artikel wird aus dem Stapel gezogen

Question

Ich habe seltsames Problem mit OWL CAROUSEL 2. Ich erstelle ein einfaches Karussell für 12 Tabellen, aber wenn die Option "autoWidth" verwendet wird, wird die letzte Tabelle herausgezogen Karussellstapel.

DEMO

Wenn Sie offene Geige, gibt es für jeden Monat im Jahr Karussell. Am Ende des Karussells gibt es keinen Dezember, aber wenn Sie den Quellcode überprüfen, können Sie sehen, dass der Dezember da ist. Aus irgendeinem Grund zieht OWL Karussell-Plugin Dezember heraus.

Irgendwelche Ideen? Im Voraus, vielen Dank!

Answer 1

Ich lief gerade in dieses Problem auch. Ich habe es auf eine schlechte Art repariert, aber es funktioniert. in beiden Browsern. Das Problem war mit dem owl-stage Element. Das Eulenkarussell lib hat die Eigenschaft width gezählt, aber die Elemente passen nicht in den Wrapper. Also muss ich eine Funktion aufrufen, nachdem das init Ereignis passiert ist und fügen Sie über 100px hinzu. verwendete ich die setTimeout-Funktion mit diesem .Very schlechten Ansatz, den ich kenne, aber in meinem Projekt gibt es passiert eine Menge von js Funktionen und Allways nicht die richtige width Eigenschaft erhalten (manchmal i undefined bekommen)

So ist der Code:

$('.owl-carousel').owlCarousel({ 
     margin:90, 
     nav:true, 
     dots:true, 
     autoWidth:true, 
     afterInit: setWidth() 
    }); 

    function setWidth(){ 
     setTimeout(function(){ 
      var carWidth = $('.owl-stage').width() + 100; 
      $('.owl-stage').width(carWidth); 
     },200); 

    } 

ich bin sicher, dass es ohne setTimeout funktionieren könnte, aber Fristen können nicht warten (* Gefühl, schlecht für sie).

Hoffe es hilft!

Answer 2

Fügen Sie in CSS einfach display flex für .owl-stage Klasse hinzu und fügen Sie auch jS-Funktion für kleinere Geräte hinzu.

CSS

.owl-stage{display:flex} 

JS

$('.owl-carousel').owlCarousel({ 
    loop: false, 
    autoWidth:true, 
    margin:10, 
    nav:true, 
    responsive:{ 
    0:{ 
    items:1, 
    autoWidth:false 
    }, 
    768:{ 
    items:3 
    } 
    } 
});