随着jQuery / JS中轮播中幻灯片的变化在特定的div中添加和删除类

Question

I am using slick slider and i want to add/remove "active" in a div which is outside (somewhere else in the page) slick slider code. For example: I have this code for the slider.

<div class="slider">
    <div class="showcase-1"><img src="img/1.jpg" alt="" /></div>
    <div class="showcase-2"><img src="img/2.jpg" alt="" /></div>
    <div class="showcase-3"><img src="img/3.jpg" alt="" /></div>
</div>

Now on change of slide, "active" class should be added to div and then the "active" class should be removed by itself when the slide is changed and it should be added to second div which is for second slide. Note that every div is for each slide. Like first div is for "showcase-1" slide and second div for "showcase-2".

<div class="showcase"></div>
<div class="showcase"></div>
<div class="showcase"></div>

I tried this jquery and it's working good but it's not changing the classes on change of slides.:D i am sure this is not a right way!

$(function() {
 if ($(".slider .showcase-1").hasClass("slick-current")) {
     $("div.showcase-1").addClass('active');
 } else {
     $('div.showcase-1').removeClass('active');
 }
});

Answer 1

It looks like Slick slider developers have already found and fixed this bug where all slides were getting the "slick-active" class. Now all slides get slick-active but only the current slide gets "slick-slide slick-current slick-active" classes.

If you use the latest version of Slick you will receive this improvement and won't have to write your own.

See the Slick slider demos here and inspect them and you will see these more helpful, updated classes.