slick限定 特定のスライドが表示されている時に画像のファイル名を切り替える

slick限定 特定のスライドが表示されている時に画像のファイル名を切り替える

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

ホームページ制作の
お問い合わせ

Y desIgnのサービスは全国対応可!

全国
対応

遠方の企業様にLINEやzoomなどのビデオ会議ツールを活用させていただくことで日本全国のお客様へのサービス提供を可能としております。

ホームページを作りたいと
お伝えください

受付時間
平日火曜~金曜 10:00~17:00

0586-52-5113