'Owl carousel go to clicked item

I have owl carousel v-2.0.0 with 5 items.

<div class="owl-carousel">
    <div class="item">
        <img src="img/1-m.png" alt="">
    </div>
    <div class="item">
        <img src="img/3-s.png" alt="">
    </div>
    <div class="item">
        <img src="img/2-l.png" alt="">
    </div>
    <div class="item">
        <img src="img/2-l.png" alt="">
    </div>
    <div class="item">
        <img src="img/1-m.png" alt="">
    </div>
</div>

and js to init it.

$(".owl-carousel").owlCarousel({
    loop: true,
    nav: true,
    responsive: {
        0: {
            items: 1
        },
        480: {
            items: 3
        },
        1000: {
            items: 5
        }
    }

});

Carousel working by drag? How to make it work by click on item(clicked item becomes the central). And how to add custom class to center item?

jquerycarouselowl-carousel


Solution 1:[1]

 $(document).on('click', '.owl-item', function () {
  owlIndex = $(this).index();
  $('.owl-stage-outer').trigger('to.owl.carousel', owlIndex);
});

Solution 2:[2]

if you have loop: false use this code

$(document).on('click', '.owl-item', function() {
  owlIndex = $(this).index();
  $('.owl-stage-outer').trigger('to.owl.carousel', owlIndex);
});

if you have:

loop: true,
rtl: true

Use this code:

$(document).on('click', '.owl-item', function() {
  owlIndex = $(this).index();
  count = document.querySelectorAll(".owl-item.active").length;
  $('.owl-stage-outer').trigger('to.owl.carousel', owlIndex - count + 1);
});

If you have:

loop: true,
rtl: false

Use this code:

$(document).on('click', '.owl-item', function() {
  owlIndex = $(this).index();
  count = document.querySelectorAll(".owl-item.active").length;
  $('.owl-stage-outer').trigger('to.owl.carousel', owlIndex - count);
});

Solution 3:[3]

If you have a carousel with loop: true you might need to add a data-attribute to each slide

$(document).on('click', '.owl-item', function (e) {
  var position = $('[data-position]',  $(this)).data('position')
  $owl.trigger('to.owl.carousel', position)
});

<div class="owl-item">
    <div data-position="{{ loop.index0 }}">...</div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Happy Patel
Solution 2 Tyler2P
Solution 3 Mina

Related Questions