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

Я использую Owl Carousel для создания слайд-шоу.

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

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

См. пример возникновения проблемы: jsfiddle.net/7yd04b1p/7.

введите здесь описание изображения

Я обнаружил, что Owl 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)"
  };
},

Кто-нибудь знает, как это решить?

Спасибо!


css css-transitions owl-carousel owl-carousel-2 translate3d
person Dwcps    schedule 24.05.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Добавьте это в свой код 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)
});
person maheshv13    schedule 24.05.2016

arrow_upward
0
arrow_downward

Добавь это

.owl-wrapper {
  background: #000;
}

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

person breezy    schedule 24.05.2016
comment
Это решает проблему, но в моем случае цвет фона каждого элемента задается динамически из CMS, поэтому я не знаю, какой цвет фона будет установлен, и у каждого элемента может быть свой фон, но спасибо за быстрый ответ. - person Dwcps; 24.05.2016
comment
Без проблем. Если это помогло вам отметить это как ответ? - person breezy; 24.05.2016