Slick: how to get the index of the slide clicked?

[JBusch]

i'm trying for hours now :-/

[kenwheeler]

$(this).index($('your-slider').slick.$slides());

[JBusch]

Hmm, it keeps telling me tha $slides is not a function TypeError: $(...).slick.$slides is not a function

[JBusch]

well, i guesss that this is noch my problem, here is my code:

$('element-in-slickslide').on('click', function(event) {
event.preventDefault();

       $('mySlick').slickGoTo('5'); // why doesn't that work?

       $(this).closest('.slick-slide').index($('.mySlick').slick.$slides); // doesn't work

would be super thankfull if you could answer me this last question. would like do spend a beer or two, you got flattr or something?

[JBusch]

draggable was my problem. after i set draggle: false, everything works. thanks for everything!

[guyisra]

I am getting the same error on slick.$slides().. not a function

setting draggable to false did not solve this for me...

[kenwheeler]

slick slides is not a function. its a property. slick.$slides

[guyisra]

is it accessible from the outside? if not, how can I get back a slide given an index?

[kenwheeler]

$('your-slider').slick.$slides.get(index)

[guyisra]

I am getting undefined for $('your-slider').slick.$slides
This also happens in the demo site

[kenwheeler]

Are you replacing "your-slider" with the classname of your slider?

[guyisra]

of course, going to http://kenwheeler.github.io/slick/ and doing $('.multiple-items').slick.$slides yields the same result

[kenwheeler]

Hmm, looks like that the initial state. I would try $(this).index('.slick-track') maybe?

[guyisra]

$(this) in what context?

[guyisra]

ok I was able to resolve this I think.. If any issues rise again I'll open a new issue. Thanks!

[soundyogi]

Could you post your solution please? How can i get the Index of a Slide with a Click handler e.g.

[guyisra]

I don't know if my solution fits your need, but I did

$(slick.$slides.get(index))

where slick is the slick object, as described by @kenwheeler above.

[soundyogi]

Sorry if i am stupid, but i do not get it at all - Could you post a more verbose example?

Also youre trying to get a specific slide given an index right?

I need to get the index of the slide i have clicked, without the cloned slides....

[kenwheeler]

Hey @soundyogi, I'll add an official method for this. You can probably pull it off by checking the index of the slide within the slick.$slides array for the time being.

[yupit-github]

$(".YOUR-SLIDER-SELECTOR .slick-list .slick-track .slick-slide").on("click", function(e) {
slickClickedItemNumber = $(e.currentTarget).attr("data-slick-index");
});

[sartegbolt]

A bit of an old post, but I hit the same problem.
Looking at @kenwheeler solution above re. slick.$slides, it makes perfect sense. The actual index is an array index and not data-slick-index attribute.

[63kans]

```

$('.a_class').click(function(e) {
var clickedIndex = $(this).data("slick-index");
});

[tossapholchin]

Good for you.

var currentIndex = $('.slick-current').attr('data-slick-index');

Ex.

$('.next').on('click', function(e) {
    var currentIndex = $('.slick-current').attr('data-slick-index');
    currentIndex++;
    $('.caption').html('Slide number: ' + currentIndex);
  });

[muddasirawan]

jQuery( ".ul-slider-nav li a" ).on('click', function(){
        slide_active = jQuery(this).data("slide-num");
        jQuery('.pt-slick-carousel__slides').slick('slickGoTo', slide_active);  

    });

    jQuery('.pt-slick-carousel__slides').on('beforeChange', function(event, slick, currentSlide, nextSlide){        
        jQuery( ".ul-slider-nav li a" ).each(function( index ) {            
            jQuery('.ul-slider-nav li a').removeClass('active');
            jQuery('.ul-slider-nav li a').eq( nextSlide ).addClass('active');
        });

    });

[richt222]

None of this worked for me unfortunately. I couldn't manage to access the slick.$slides array at all to get at the index of the clicked slide.

Referencing the slick-index attribute of the slide in the HTML is possible. However, if you perform manipulations such as removing a slide, this throws the HTML attribute index out of sync with Slick's internal index of slides. The slick-index attributes therefore can't be relied upon if you're making changes to Slick's content.

The only way I found to do it was to get the frame's index dynamically, by inspecting the DOM to get frame's position amongst the non-cloned slides, like so...

<div class="slider">
  <div class="a-frame">your content</div>
  <div class="a-frame">your content</div>
  <div class="a-frame">your content</div>
</div>

...

$('.a-frame').on('click', function() {
  clickedIndex = $('.a-frame').not(".slick-cloned").index(this);
  // do something with clickedIndex
});

Edit: Just a workaround solution, of course. It would be much better to be able to request the index from Slick itself.