Get Current slide of SLICK SLIDER and add Classes to inner elements

Question

I have a Slick slider like the example shown in the slick page, I am using the code like this,

<div class="slideshow">
    <img src="http://lorempixel.com/500/250" />
    <img src="http://lorempixel.com/500/251" />
    <img src="http://lorempixel.com/500/249" />
</div>

with a thumbnail carousal

<div class="thumbs">
    <img src="http://lorempixel.com/100/100/" />
    <img src="http://lorempixel.com/100/100/" />
    <img src="http://lorempixel.com/100/100/" />
</div>

Now the Js Code is something like this:

$('.slideshow').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.thumbs'
});
$('.thumbs').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slideshow',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});

This works fine, but what I am trying to achive is on the current slide of thumb I want to add something, like class, or on inside element of current thumb( here eg: img).

I tried code like this:

$('.thumbs').on('beforeChange', function(event, slick, currentSlide, nextSlide){
                 $('.slick-current img').addClass('works');                 
                });

but not working, what is wrong with my code, Is there a way to get this work properlyl

Inge

Add a click handler on ".thumbs > img", then you can use $(this) to access the clicked img and modify it. – Wesley

Answer 1

change you beforeChange function as below

$('.slideshow').on('beforeChange', function(event, slick, currentSlide, nextSlide){
      $(".slick-slide").removeClass('works');
      $('.slick-current').addClass('works');        
   });

Please find dis fiddle for your reference

Frey

it works, but what about the first thumb, I mean on int the class is not applied to first slide?? – Inge

click on the second thumb than first thumb than it'll work because at the very first time it'll not change the slider so it'll not add class does it make sense to you ? – Frey

no, but what is this methods in the slick documentations - init : Fires after first initialization, I think this might do the work? – Inge

Similarly what you can do is just add class on document. ready please find fiddle for the same – Frey