Entfernen Sie leeren Platz zwischen den Elementen während des Übergangs

Question

Ich benutze Owl Carousel, um eine Diashow zu erstellen.

Wenn ich für alle Karussellobjekte die gleiche Hintergrundfarbe verwende, wird beim Übergang zwischen den Elementen ein leerer Bereich angezeigt.

Dieses Problem tritt nur bei Verwendung des Chrome-Browsers auf. geschieht

Bitte ein Beispiel mit der Ausgabe sehen: jsfiddle.net/7yd04b1p/7

Ich fand, dass Owl Carousel CSS3 translate3d wird mit Hilfe der Folienübergänge zu tun, und ich denke, Chrome dies auf eine andere Weise rendert.

doTranslate: function(pixels) { 
 
    return { 
 
    "-webkit-transform": "translate3d(" + pixels + "px, 0px, 0px)", 
 
    "-moz-transform": "translate3d(" + pixels + "px, 0px, 0px)", 
 
    "-o-transform": "translate3d(" + pixels + "px, 0px, 0px)", 
 
    "-ms-transform": "translate3d(" + pixels + "px, 0px, 0px)", 
 
    "transform": "translate3d(" + pixels + "px, 0px,0px)" 
 
    }; 
 
},

Wer noch keine Ahnung, wie es zu lösen?

Danke!

Answer 1

diese zu Ihrem JS-Code hinzufügen

$(document).ready(function() { 
    $("#owl-demo").owlCarousel({ 
    autoPlay: 3000, 
    navigation: true, 
    slideSpeed: 300, 
    paginationSpeed: 400, 
    singleItem: true 
    }); 
    // Add this code 
    var widthItem = $(".owl-item").width(); 
    $(".owl-item .item").css("width", widthItem +1) 
}); 

Answer 2

Fügen Sie diese

.owl-wrapper { 
    background: #000; 
} 

https://jsfiddle.net/breezy/Lrrebcjw/