Reverse Owl Carousel on last slide

Question

By default owl carousel display slides in order like this, for example if I have 3 slides:

[1] [2] [3] [1] [2] [3] [1] [2] [3] ...

I want to achieve this:

[1] [2] [3] [2] [1] [2] [3] [2] [1] ...

Answer 1

You can imitate a reversal by cloning of items.

1. Clone items that are in the middle:
   [1] [2] [3] [4] -> [1] [2] [3] [4] [3] [2] .
2. Start Owl Carousel 2 in loop mode.

Please check the result. Is it what you want to achieve?

https://codepen.io/glebkema/pen/pEZpEP

 var classCarousel = '.owl-carousel'; var selectCarousel = $(classCarousel); /* 1. */ var i; for (i = selectCarousel.children().length - 1; i > 1; i--) { selectCarousel.children(':nth-of-type(' + i + ')').clone().appendTo(classCarousel); } /* 2. */ selectCarousel.owlCarousel({ autoplay: true, dots: false, items: 1, loop: true, });

 .owl-carousel img { height: auto; width: 100%; }

 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.carousel.min.css"> <div class="owl-carousel"> <div><img src="https://via.placeholder.com/900x300/936/fff/?text=1" alt=""></div> <div><img src="https://via.placeholder.com/900x300/693/fff/?text=2" alt=""></div> <div><img src="https://via.placeholder.com/900x300/369/fff/?text=3" alt=""></div> <div><img src="https://via.placeholder.com/900x300/f63/fff/?text=4" alt=""></div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2//2.0.0-beta.2.4/owl.carousel.min.js"></script>