I have problem with Owl carousel. I have 10 items in owl, in loop, and after 10th item, there's one extra blank item. How can I get rid of that blank item?

Here is my js code for owl:

<script type="text/javascript">
    $(document).ready(function() {
        $("#owl-example").owlCarousel({

            navigation : false, // Show next and prev buttons
            pagination : false,
            loop : true,
            autoplay : false,
            slideSpeed : 300,
            paginationSpeed : 400,
            items : 1 
        }); 
    });
</script>

I have problem with Owl carousel. I have 10 items in owl, in loop, and after 10th item, there's one extra blank item. How can I get rid of that blank item?

Here is my js code for owl:

<script type="text/javascript">
    $(document).ready(function() {
        $("#owl-example").owlCarousel({

            navigation : false, // Show next and prev buttons
            pagination : false,
            loop : true,
            autoplay : false,
            slideSpeed : 300,
            paginationSpeed : 400,
            items : 1 
        }); 
    });
</script>

• javascript
• jquery
• owl-carousel

• 1 Have you found solution for that? i have the same issue. – Oshrib Commented Sep 29, 2016 at 7:11
• 1 same issue. none of the answers below worked – Mayank Kumar Chaudhari Commented Jan 15, 2020 at 10:35

8 Answers 8

I had this same problem. After some research and trial, I found that removing all whitespace in my HTML solved the issue.

Check if css files are added

    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">

I had try this one and solve my issues.

#ba.owl-theme .owl-dots .owl-dot:last-child {
  display: none;
}

Just set loop: false and it should solve it! Also, if you need that to loop, add rewind: true to the carousel object.

I too had the same problem . I fixed it by changing the position of following script

$(document).ready(function() {
  var owl = $('#banner');  
  owl.owlCarousel({
    items: 1,
    loop: true,
  }); 
});

Initially this script was inside of the main owl carousel div (the outer div with the classes .owl-carousel and .owl-theme) .

Now i moved it to out side of that div . Currently it executes after the above mentioned div. It worked and the issue is solved

Check the empty item by inspect element. Probably it contains unexpected HTML. In my case, it was some other element from somewhere in the page, that end tag was missing matching start tag.

the element with .owl-carousel class should be only the the parent of carousel items. put other elements (except carousel items) out of .owl-carousel .

Add this to your CSS

.owl-carousel.owl-loading{opacity:1;}