转换期间删除项目之间的空白空间

Question

我正在使用猫头鹰旋转木马创建幻灯片。

当我对所有轮播项目使用相同的背景颜色时，在项目之间的过渡期间会显示一个空白区域。

只有使用Chrome浏览器才会出现此问题。

请查看发生问题的示例： jsfiddle.net/7yd04b1p/7

我发现Owl Carousel正在使用CSS3 translate3d进行幻灯片切换，我认为Chrome会以不同的方式渲染它。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

任何人都知道如何解决它？

谢谢！

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/