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