web-dev-qa-db-ja.com

SLICK SLIDERの現在のスライドを取得し、内部要素にクラスを追加します

スリックページに示されている例のようなスリックスライダーがあり、このようなコードを使用しています。

<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>

サムネイルカルーサル付き

<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>

これで、JSコードは次のようになります。

$('.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
});

これはうまくいきますが、私が達成しようとしているのは、クラスのような何かを追加したい現在の親指のスライド、または現在の親指の内側の要素（ここではimg）です。

私はこのようなコードを試しました：

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

しかし、動作していません、私のコードの何が問題なのですか、この動作を適切に行う方法はありますか

javascriptjquerysliderslick.js
7
Salih K

以下のようにbeforeChange関数を変更します

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

参考のためにdis fiddle を見つけてください

5
Curiousdev