Empty item in Owl Carousel

Question

I have a problem with an owl carousel. I have 10 items in an owl, in a loop, and after the 10th item, there is another extra element. How can I get rid of this last empty element?

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>

Answer 1

I had the same problem. After some research and testing, I found that removing all the spaces in my HTML solution solved the problem.

Answer 2

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">

Answer 3

I tried this and solved my problems.

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