Get Current slide of SLICK SLIDER and add Classes to inner elements
32,187
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
Author by
Salih K
Updated on June 15, 2020Comments
-
Salih K almost 4 years
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
-
Salih K about 7 yearsit works, but what about the first thumb, I mean on int the class is not applied to first slide??
-
Curiousdev about 7 yearsclick 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 ?
-
Salih K about 7 yearsno, but what is this methods in the slick documentations - init : Fires after first initialization, I think this might do the work?
-
Curiousdev about 7 yearsSimilarly what you can do is just add class on document. ready please find fiddle for the same