Slick: Accessing Current Slide Attributes in onAfterChange

[EnigmaSolved]

I feel like I'm overlooking something obvious here. I'm successfully using onAfterChange for a few things, but I can't seem to access the attributes of the current slide in this context. I've tried things like:

console.log( $(this).attr('id') );
console.log( $(slide).attr('id') );

But both report undefined, even though the slides (ie, the elements with the class slick-slide) _do_ have id's.

Any help on what I'm missing would be greatly appreciated! :)

Thanks!

[kenwheeler]

What does your onAfterChange method look like?

[EnigmaSolved]

onAfterChange: function(slide, index){
  console.log( $(this).attr('id') ); 
  console.log( $(slide).attr('id') );
}

Thanks for looking into this! :)

[kenwheeler]

try console.log(slide.$slides.get(index).attr('id'))

[EnigmaSolved]

I get the following error:

TypeError: slide.$slides.get(...).attr is not a function
b.prototype.postSlide
b.prototype.slideHandler
b.prototype.animateSlide

[kenwheeler]

Sorry console.log($(slide.$slides.get(index)).attr('id'))

[EnigmaSolved]

That works! :)

I'll do some more testing with my specific application and then close this issue (assuming I don't run into anything else related to this).

Thanks much!

[kenwheeler]

High five brotha

[EnigmaSolved]

Yeah man--right on! :)

[ujwaldhakal]

$('#carousel').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
console.log($(slide.$slides.get(index)).attr('id'));
});

on afterchange has another slide param like

onAfterChange: function(slide, index){
console.log( $(this).attr('id') );
console.log( $(slide).attr('id') );
}

[vinamrajais]

What is $slides here?

I used $("[data-slick-index='" +currentSlide+ "']").attr('id') to get the current Slide

[basepack]

Hi @vinamrajais,

$slides is an internal slick variable. You can acces it when using the slick variable that is supplied in the on('beforeChange' function.

[chronon]

This works with v1.5.x:

$('#carousel').on('afterChange', function(event, slick, currentSlide, nextSlide){
  console.log($(slick.$slides.get(currentSlide)).attr('id'));
});

[nixon1333]

Try this

console.log($('.slick-slide.slick-current.slick-active').attr('id'));

[spideep]

@nixon1333
.attr('data-slick-index')
worked in my case.

[arrancscott]

I have an issue whereas every time I remove an image with slickRemove it sets .slick-current back to being the first slide in the slideshow.

eg. If i'm on the 5th image and I call slickRemove with the slide index I'd expect the slick-current class to be applied to the next/previous slide - instead it gets applied to the first element.

Does anyone know why this is happening or if it's something I'm doing wrong?

Here is the code I'm using to init slick.

$('.slideshow').slick({
 dots: true,
 infinite: true,
 speed: 500,
 fade: true,
 cssEase: 'linear',
 adaptiveHeight: true,
 mobileFirst: true
});

[lkrids]

slick.$slides.eq(nextSlide)

jQuery : eq() vs get() -- http://stackoverflow.com/a/4709685/4698437