Удалить пустое место между пунктами во время перехода

Question

Я использую Сову Карусель для создания слайд-шоу.

Когда я использую тот же цвет фона для всех элементов карусели, во время перехода между элементами отображается пустое пространство.

Эта проблема возникает только при использовании браузера Chrome.

Пожалуйста, смотрите пример с вопросом происходит: jsfiddle.net/7yd04b1p/7

Я обнаружил, что Сова Carousel использует CSS3 translate3d, чтобы сделать слайд-переходы, и я думаю, что Chrome оказывает это по-другому.

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

Кто-нибудь есть какие-либо идеи, как решить эту проблему?

Спасибо!

Answer 1

Добавьте это в ваш код JS

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

Добавить это

.owl-wrapper { 
    background: #000; 
} 

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