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="" />
    <img src="" />
    <img src="" />
</div>

with a thumbnail carousal

<div class="thumbs">
    <img src="/" />
    <img src="/" />
    <img src="/" />
</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

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./500/250" />
    <img src="http://lorempixel./500/251" />
    <img src="http://lorempixel./500/249" />
</div>

with a thumbnail carousal

<div class="thumbs">
    <img src="http://lorempixel./100/100/" />
    <img src="http://lorempixel./100/100/" />
    <img src="http://lorempixel./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

• javascript
• jquery
• slider
• slick.js

• Add a click handler on ".thumbs > img", then you can use $(this) to access the clicked img and modify it. – sandrooco Commented Mar 27, 2017 at 9:26

1 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