csscss-transitionsowl-carouseltranslate3dowl-carousel-2

Remove empty space between items during transition

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!

Solution

  • 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)
});