Search code examples
javascripthtmlcarouselowl-carousel

Extra empty item in Owl Carousel

I know this has been asked before, but none of the answers there were marked as the correct one, neither did anyone of them work for me. I have an Owl Carousel that has an empty space before the first slide (or after the last one...). I tried everything but can not seem to remove it. Any help would be appreciated.

This is the code used to initiate it:

$(document).ready(function () {
    $(".owl-carousel").owlCarousel({
        loop: true,
        autoplay: true,
        autoplayTimeout: 3000,
        nav: true,
        navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>'],
        margin: 10,
        responsive: {
            0: {
                items: 1
            },
            700: {
                items: 2
            },
            1100: {
                items: 4
            }
        }
    })
})

This is the same exact thing in codepen:

https://codepen.io/sarmadhadi/pen/PoGMbQK

Notice how there is an extra element after Gift 6 and before Gift 1

Solution

  • The problem is in your html. Buttons prev and next you put together with cards, and the plugin treats this as a slide. This creates an empty space for you.

    Place divs with buttons outside <div class="owl-carousel">...</div>. Like this:

    <div class="owl-carousel">
   ...
</div>

<div class="owl-controls">
   <div class="owl-nav">
      <div class="owl-prev">prev</div>
      <div class="owl-next">next</div>
   </div>  
</div>

    But this will cause problems with styles, since you specified certain selectors in css. You just have to fix the selectors in the css.