How to make such an owl carousel?

There is a slider, showing 4 elements. There are only 20 elements. How to make it so that when you click on an element (out of 4 which is in sight), it is the first in sight, that is, the slucer is spinning so that the element is first. I hope clearly explained.

    1 answer 1

    Here is a great example.

    $('.owl-carousel').owlCarousel({ loop: true, items: 4, nav: true, navText: [ "<i class='fa fa-caret-left'></i>", "<i class='fa fa-caret-right'></i>" ], }).on('click', '.owl-item', function(e) { const carousel = $('.owl-carousel').data('owl.carousel'); carousel.to(carousel.relative($(this).index()), false, true); });

    https://codepen.io/anon/pen/yGGGGv?editors=1010