CODEWITHSUNDEEP
jqueryowl-carousel
XeTK
XeTK

Reputation: 53

OWL Carousel: Getting index of object that is clicked

So I am trying to use the Carousel for navigation on a UI that I am designing, I'm just wondering if there is a way to easily get the index of one of the div objects within the carousel.

I am trying to make it when I click one of the divs, that it centers it within the carousel, so if I can get the index of the div that has been clicked I can then call the code below to set that as the center item.

var owl = $('.owl-carousel');
owl.owlCarousel();
owl.trigger('to.owl.carousel', NUMBEROFDIVCLICKED);

Image of what i'm trying to do: To-be picture of movement of items

Upvotes: 5

Views: 25624

Answers (3)

Bonez024
Bonez024

Reputation: 1398

I would go with a much cleaner solution using owl.events.

First, wire up an event to your owl configuration.

Note there are a list of other events you can listen for as well here: https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html

Example:

var owl, numberOfSlides, slideIndexBeforeChange;


owl = $('.owl-carousel').owlCarousel({
            onInitialized: counter, //When the plugin has initialized.
            onTranslate : counter, //When the translation of the stage has started.
}

Then Create your function to capture the event and it's properties

function counter(event) {
            numberOfSlides = event.item.count;     // Number of items
            slideIndexBeforeChange = event.item.index;
        }

Upvotes: 0

witrin
witrin

Reputation: 3763

Obviously you speaking about version 2.0 beta because you're using to.owl.carousel. I would not go with the solution from Leif because it won't work in many cases. So this is what you can do:

$('.owl-carousel').on('click', '.owl-item', function(e) {
  var carousel = $('.owl-carousel').data('owl.carousel');
  e.preventDefault();
  carousel.to(carousel.relative($(this).index()));
});

Here is a demo. But please notice it's beta and might change. You have also to use the latest development.

Depend on what plugins your are using (navigation) you have to write the to call like this:

carousel.to(carousel.relative($(this).index()), false, true);

Here are some explanations:

  • $(this).index() is part of jQuery and gives you the position of the clicked item .owl-item within its container.
  • $('.owl-carousel').data('owl.carousel') gives you the plugin object of Owl Carousel, thus you can use the API directly without using the plugin method ($('.owl-carousel').owlCarousel('method', 'arg')) or jQuery events ($('.owl-carousel').trigger('method', ['arg'])).
  • carousel.relative($(this).index()) gives you the relative position of the clicked item. This is always necessary when you have loop activated, which uses cloned items and thus you have more items before you started the plugin.
  • carousel.to() only accepts relative positions.

Upvotes: 14

Leif
Leif

Reputation: 1126

You can use the owl.goTo event. This will however scroll the supplied item all to the left. For example: If you show 5 items, like in your screenshot, you have to use index - 2:

owl.find('.owl-wrapper').on('click', '.owl-item', function(e) { 
    e.preventDefault(); 
    owl.trigger('owl.goTo', $(this).index() - 2) 
});

Read "4. Custom Events" at http://owlgraphic.com/owlcarousel/#customizing for more details on the events.

Upvotes: -1

Related Questions