0

I'm using Owl Carousel to create a slideshow.

When I use the same background color for all carousel items an empty space is displayed during the transition between items.

This issue only occurs using Chrome browser.

Please see an example with the issue happening: jsfiddle.net/7yd04b1p/7

enter image description here

I found that Owl Carousel is using CSS3 translate3d to do the slide transitions and I think Chrome is rendering this in a different way.

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

Anyone have any idea how to solve it?

Thanks!

Danilo Formagio
  • 189
  • 1
  • 1
  • 7

2 Answers2

2

Add this to your JS code

$(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)
});
maheshv13
  • 133
  • 9
0

Add this 

.owl-wrapper {
  background: #000;
}

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

breezy
  • 1,910
  • 1
  • 18
  • 35
  • This solve the problem, but in my case each item's background color are set dynamically from a CMS, so I don't know what background color will be set and each item can have different background, but thanks for the quick reply. – Danilo Formagio May 24 '16 at 17:21
  • No problem. If this helped you mind marking this as the answer? – breezy May 24 '16 at 17:26