afterChangeについて

afterChangeはslickでのみ使えるイベントである。これを使うことでslickでスライドする度に処理が出来る。

on(‘afterChange’,function(slick,currentSlide)

以下ソースコード例

$(function(){
    var $setBody = $('.変更したい画像の直前にあるクラス名またはIDまたは要素名 img'),
        //～_blaという名前の画像に切り替えるための変数
        imgBlack = '_bla',
        //～_whiという名前の画像に切り替えるための変数
        imgWhite = '_whi',
        //slick部分の親にあたるクラス名
        $slider = $('.slider');

    //$('.変更したい画像の直上にあるクラス名 img')に対して繰り返し処理(eachで繰り返し)
    $setBody.each(function () {
        var $this = $(this);

　　　　//afterChangeがslickのスライドが移動した後に発生するイベント。
       //function(slick,currentSlide)まで必要
        $slider.on('afterChange',function(slick,currentSlide){
　　　　　　 //function imgName()に記述された処理を実行
            imgName();
        });

        function imgName() {
　　　　　　 //クラス名slide01とslide02（1番目と2番目）が付いた要素にクラス名slick-currentがあったら
            if ($(".slide01,.slide02").hasClass("slick-current")) {
                //クラス名slide01とslide02の画像の名前を～_whiから～_blaに変更
                $this.attr('src', $this.attr('src').replace(imgWhite, imgBlack));
            } else {
                //クラス名slide01とslide02の画像の名前を～_blaから～_whiに変更
                $this.attr('src', $this.attr('src').replace(imgBlack, imgWhite));
            }
        }

    //ページ読み込み時にも処理が出来るようにここでも実行
    imgName();
    });
});
});