『slick』のイベントをサンプル付きで細かくまとめました

JavaScript2021.04.04

以前の記事でオプションを大量に紹介したのでこちらの記事ではイベントを紹介していきます。

簡単なサンプル付きにしていきますので少し重いかもしれませんがよろしくどうぞ。

『slick』の基本的な使い方（オプションなど）を細かくまとめていく

以前紹介した“『slick』を使った無限ループスライダーの作り方と注意点“の記事が結構人気みたいなので、改めてjQueryのプラグイン『sl・・・。

『slick』のメソッドをすべてサンプル付きでまとめてみました

slickのメソッドをすべてサンプル付きで紹介しています。全て動くようになっているので重いかもしれませんがよろしくお願いします。この記事・・・。

この記事の目次

slickのイベント一覧

slickのイベント一覧

イベントを書く時の基本的な書式は以下の通りです

$('スライダー').on('イベント名', function(引数) {
  //イベントが発生したときに実行する処理を書く
});

$('スライダー').on('イベント名', function(引数) {

//イベントが発生したときに実行する処理を書く

});

使えるイベントは表にまとめましたのでご確認ください

イベント名	使える引数	イベントの説明
afterChange	slick, currentSlide	スライドが切り替わった後
beforeChange	slick, currentSlide, nextSlide	スライドが切り替わる前
breakpoint	event, slick, breakpoint	ブレイクポイント時
destroy	event, slick	slickのスライダーを解除した時
edge	event, direction	『infinite:false』の際に両端のスライドをドラッグした時
init	slick	スライダーが初期化された時
reInit	slick	スライダーが再初期化された時
setPosition	slick	位置/サイズの変更後
swipe	slick, direction	スワイプやマウスドラッグ後
lazyLoaded	event, slick, image, imageSource	画像がlazyLoadされる時
lazyLoadError	event, slick, image, imageSource	画像がlazyLoadされなかった時

『afterChange』イベント

『afterChange』イベントを使うとスライドが切り替わった後に処理を実行させることができます。

デフォルトで引数が用意されていて、第一引数（slick）にはスライダーの情報、第二引数（currentSlide）には表示中のスライドの情報が入ってきます。

$('スライダー').on('afterChange', function(slick, currentSlide) {
  //スライドが切り替わった後に実行する処理を書く
});

$('スライダー').on('afterChange', function(slick, currentSlide) {

//スライドが切り替わった後に実行する処理を書く

});

第三引数を追加するとindex番号が取得できるのでこちらを利用して処理をすることも可能ですし、引数なしでも動きますが、用意されたものは入れておくと確実だと思います。

ここではサンプルとしてスライドが切り替わった後に何枚目が表示されているかを表示していきます。

『afterChange』SAMPLE

①

②

③

何枚目を表示しているか

ベースとなるHTMLはこちら

<div class="slider">
  <div class="slider_item">①</div>
  <div class="slider_item">②</div>
  <div class="slider_item">③</div>
</div>
<div class="message">何枚目を表示しているか</div>

</div>

<div class="message">何枚目を表示しているか</div>

スライドが切り替わった後に処理を実行するために『afterChange』イベントも設置していきます。

第二引数（currentSlide）の中には表示中のスライドの情報が入っていますのでこの中からindex番号と同じものを取得して.messageの中を書き換えるようにしています

<script>
  $(function() {
    var $slider = $('.slider');
    $slider.slick();
    $slider.on('afterChange', function(slick, currentSlide) {
      $('.message').text((currentSlide['currentSlide'] + 1) + '枚目表示中');
    });
  });
</script>

$(function() {

var $slider = $('.slider');

$slider.slick();

$slider.on('afterChange', function(slick, currentSlide) {

$('.message').text((currentSlide['currentSlide'] + 1) + '枚目表示中');

});

</script>

『beforeChange』イベント

『beforeChange』イベントを使うとスライドが切り替わる直前に処理を実行させることができます。

デフォルトで引数が用意されていて、第一引数（slick）にはスライダーの情報、第二引数（currentSlide）には表示中（切り替わる直前）のスライドの情報が、第三引数（nextSlide）には調べたところ表示中（切り替わる直前）のスライドのindex番号が入ってきます。

$('スライダー').on('beforeChange', function(slick,currentSlide,nextSlide) {
  //スライドが切り替わる直前に実行する処理を書く
});

$('スライダー').on('beforeChange', function(slick,currentSlide,nextSlide) {

//スライドが切り替わる直前に実行する処理を書く

});

ここではサンプルとしてスライドが切り替わり始めると同時に、直前に何枚目が表示されていたかを表示していきます。

『beforeChange』SAMPLE

①

②

③

何枚目から移動したか

ベースとなるHTMLはこちら

<div class="slider">
  <div class="slider_item">①</div>
  <div class="slider_item">②</div>
  <div class="slider_item">③</div>
</div>
<div class="message">何枚目から移動したか</div>

</div>

<div class="message">何枚目から移動したか</div>

第三引数（nextSlide）にindex番号が入っているのでこちらを利用して処理をしてみました

<script>
  $(function() {
    var $slider = $('.slider');
    $slider.slick();
    $slider.on('beforeChange', function(slick, currentSlide, nextSlide) {
      $('.message').text((nextSlide + 1) + '枚目から移動');
    });
  });
</script>

$(function() {

var $slider = $('.slider');

$slider.slick();

$slider.on('beforeChange', function(slick, currentSlide, nextSlide) {

$('.message').text((nextSlide + 1) + '枚目から移動');

});

</script>

『breakpoint』イベント

『breakpoint』イベントを使うとオプションで設定してあるブレイクポイントに達したときに処理を実行させることができます。※ load時は動かない模様

デフォルトで引数が用意されていて、第一引数（event）にはイベントオブジェクト、第二引数（slick）にはスライダーの情報、第三引数（breakpoint）にはブレイクポイントが入ってきます。

$('スライダー').on('breakpoint', function(event, slick, breakpoint) {
  //ブレイクポイントに達したときに実行する処理を書く
});

$('スライダー').on('breakpoint', function(event, slick, breakpoint) {

//ブレイクポイントに達したときに実行する処理を書く

});

ここではサンプルとしてブレイクポイントに達したときにメッセージを表示していきます。

『breakpoint』SAMPLE

①

②

③

ブレイクポイント判定

ベースとなるHTMLはこちら

<div class="slider">
  <div class="slider_item">①</div>
  <div class="slider_item">②</div>
  <div class="slider_item">③</div>
</div>
<div class="message">ブレイクポイント判定</div>

</div>

<div class="message">ブレイクポイント判定</div>

ブレイクポイントに達したときに発動するのイベントなのでオプションで「responsive」と「breakpoint」の設定は必須です。

今回のコードでは1000px以下になった時にイベントが発動、引数の『breakpoint』にオプションで設定した1000が入ってくるのでこれを使います。

逆に1000以下から1000より大きいウインドウサイズになった時は、引数の『breakpoint』の中身が「null」になるのでこれを利用して条件分岐させてみました

<script>
  $(function() {
    var $slider = $('.slider');
    $slider.slick({
      responsive: [{
        breakpoint: 1000
      }]
    });
    $slider.on('breakpoint', function(event, slick, breakpoint) {
      if (breakpoint) {
        $('.message').text('1000px以下');
      } else {
        $('.message').text('1000pxより大きい');
      }
    });
  });
</script>

$(function() {

var $slider = $('.slider');

$slider.slick({

responsive: [{

breakpoint: 1000

}]

});

$slider.on('breakpoint', function(event, slick, breakpoint) {

if (breakpoint) {

$('.message').text('1000px以下');

} else {

$('.message').text('1000pxより大きい');

}

});

</script>

『destroy』イベント

『destroy』イベントはslickを解除したときに処理を実行させることができます。
※ slickの解除は「unslick」メソッドを使う

デフォルトで引数が用意されていて、第一引数（event）にはイベントオブジェクト、第二引数（slick）にはスライダーの情報が入ってきます。

$('スライダー').on('destroy', function(event,slick) {
  //slickを解除したときに実行する処理を書く
});

$('スライダー').on('destroy', function(event,slick) {

//slickを解除したときに実行する処理を書く

});

このサンプルでは解除用のボタンにクリックイベントを設定し、slickを解除する処理を入れておきます

ボタンがクリックされたらイベント内に設定したフェードアウトの処理が実行される仕組みです

『destroy』SAMPLE

①

②

③

解除

ベースとなるHTMLはこちら

<div class="slider">
  <div class="slider_item">①</div>
  <div class="slider_item">②</div>
  <div class="slider_item">③</div>
</div>
<div class="btn">解除</div>

</div>

このサンプルでは解除用のボタンにクリックしたらスライダーが消えるようにしています

<script>
  $(function() {
    var $slider = $('.slider');
    $slider.slick();
    $slider.on('destroy', function(event, slick) {
      $(this).fadeOut();
    });
    $('.btn').on('click', function() {
      $slider.slick('unslick');
    });
  });
</script>

$(function() {

var $slider = $('.slider');

$slider.slick();

$slider.on('destroy', function(event, slick) {

$(this).fadeOut();

});

$('.btn').on('click', function() {

$slider.slick('unslick');

});

</script>

『edge』イベント

『edge』イベントは「infinite:false」でスライドの両端（これ以上進んだり戻れない方向）をドラッグorスワイプしたときに処理を実行させることができます

デフォルトで引数が用意されていて、第一引数（event）にはイベントオブジェクト、第二引数（direction）にはスライダーの情報が入ってきます。

$('スライダー').slick({
  infinite:false
});
$('スライダー').on('edge', function(event,direction) {
  //『infinite:false』でスライドの両端をドラッグorスワイプしたときに実行する処理を書く
});

$('スライダー').slick({

infinite:false

});

$('スライダー').on('edge', function(event,direction) {

//『infinite:false』でスライドの両端をドラッグorスワイプしたときに実行する処理を書く

});

ここではサンプルとして、これ以上進んだり戻れない方向へドラッグorスワイプしたときにメッセージを変更するようにしています

『edge』SAMPLE

①

②

③

両端をドラッグすると

ベースとなるHTMLはこちら

<div class="slider">
  <div class="slider_item">①</div>
  <div class="slider_item">②</div>
  <div class="slider_item">③</div>
</div>
<div class="message">両端をドラッグすると</div>

</div>

<div class="message">両端をドラッグすると</div>

まずは「infinite:false」のスライダーを用意します、これ以上進んだり戻れない方向へドラッグorスワイプしたときにメッセージを変更できるよう『edge』イベントを設置し、中にメッセージを変更するコードを仕込んでいます。

<script>
  $(function() {
    var $slider = $('.slider');
    $slider.slick({
      infinite:false
    });
    $slider.on('edge', function(event, direction) {
      $('.message').text('これ以上無理です');
    });
  });
</script>

$(function() {

var $slider = $('.slider');

$slider.slick({

infinite:false

});

$slider.on('edge', function(event, direction) {

$('.message').text('これ以上無理です');

});

</script>

『init』イベント

『init』イベントはslickが初期化されたとき（起動時1回のみ）に処理を実行させることができます。

デフォルトで引数が用意されていて、第一引数（slick）にはスライダーの情報が入ってきます。

$('スライダー').on('init', function(slick) {
  //slickが初期化されたときに実行する処理を書く
});

$('スライダー').on('init', function(slick) {

//slickが初期化されたときに実行する処理を書く

});

ここではサンプルとして、slickが初期化されたときにメッセージを表示するようにしています

『init』SAMPLE

①

②

③

ベースとなるHTMLはこちら

<div class="slider">
  <div class="slider_item">①</div>
  <div class="slider_item">②</div>
  <div class="slider_item">③</div>
</div>
<div class="message"></div>

</div>

まずはイベントの方をを用意します、イベントを先に用意しておかないと『init』イベントはうまくいきません。イベントの中にメッセージを表示するコードを仕込んでいます。

<script>
  $(function() {
    var $slider = $('.slider');
    $slider.on('init', function(slick) {
      $('.message').text('初期化しました');
    });
    $slider.slick();
  });
</script>

$(function() {

var $slider = $('.slider');

$slider.on('init', function(slick) {

$('.message').text('初期化しました');

});

$slider.slick();

});

</script>

『reInit』イベント

『reInit』イベントはslickが再初期化するたびに処理を実行させることができます。

デフォルトで引数が用意されていて、第一引数（slick）にはスライダーの情報が入ってきます。

$('スライダー').on('reInit', function(slick) {
  //slickが再初期化されたときに実行する処理を書く
});

$('スライダー').on('reInit', function(slick) {

//slickが再初期化されたときに実行する処理を書く

});

ここではサンプルとして、slickが再初期化されたときに「リロードしました」とメッセージを表示し、スライダーは自動再生するようにしています

『reInit』SAMPLE

①

②

③

リロードボタン

ベースとなるHTMLはこちら

<div class="slider">
  <div class="slider_item">①</div>
  <div class="slider_item">②</div>
  <div class="slider_item">③</div>
</div>
<div class="message"></div>

</div>

まずはイベントの方をを用意します、イベントを先に用意しておかないと『reInit』イベントはうまくいきません。イベントの中にメッセージを表示するコードを仕込んでいます。

リロードボタンをクリックするとslickを再構築するメソッドを仕込んでいます。再構築する際は自動再生のオプション付きで再構築されるように設定しています。

<script>
  $(function() {
    var $slider = $('.slider');
    $slider.on('reInit', function(slick) {
      $('.btn').text('リロードしました');
    });
    $slider.slick();
    $('.btn').on('click',function(){
      $slider.slick('slickSetOption', 'autoplay',true, true);
    });
  });
</script>

$(function() {

var $slider = $('.slider');

$slider.on('reInit', function(slick) {

$('.btn').text('リロードしました');

});

$slider.slick();

$('.btn').on('click',function(){

$slider.slick('slickSetOption', 'autoplay',true, true);

});

</script>

『setPosition』イベント

『setPosition』イベントはスライドの大きさが変更したり、少し動いたりしたときに発生する位置の再計算がされたときに処理を実行させることができます。

デフォルトで引数が用意されていて、第一引数（slick）にはスライダーの情報が入ってきます。

$('スライダー').on('setPosition', function(slick) {
  //位置の再計算がされたときに実行する処理を書く
});

$('スライダー').on('setPosition', function(slick) {

//位置の再計算がされたときに実行する処理を書く

});

slick起動時にもイベントが発生してしまうので「テスト開始」ボタンを用意しました。
クリックするとボタンが「動きを監視中」に変化します。
この状態でスライドを動かしたり、ウィンドウ幅を変えたりするとボタン内のメッセージが変わるような仕組みにしています

『setPosition』SAMPLE

①

②

③

テスト開始

ベースとなるHTMLはこちら

<div class="slider">
  <div class="slider_item">①</div>
  <div class="slider_item">②</div>
  <div class="slider_item">③</div>
</div>
<div class="btn">テスト開始</div>

</div>

<div class="btn">テスト開始</div>

上にも書いた通り「テスト開始」ボタンをクリックして初めてイベントが発生するようにクリックイベントの中に『setPosition』イベントを入れ込んでいます。

仕様上初期化時にも再計算されるのでこのような形で試していますが、むき出しにしても問題はありません

<script>
  $(function() {
    var $slider = $('.slider');
    $slider.slick();
    $('.btn').on('click',function(){
      $('.btn').text('動きを監視中');
      $slider.on('setPosition', function(slick) {
        $('.btn').text('再計算しました！');
      });
    });
  });
</script>

$(function() {

var $slider = $('.slider');

$slider.slick();

$('.btn').on('click',function(){

$('.btn').text('動きを監視中');

$slider.on('setPosition', function(slick) {

$('.btn').text('再計算しました！');

});

</script>

『swipe』イベント

『swipe』イベントはスライドをスワイプやマウスドラッグしたときに処理を実行させることができます。

デフォルトで引数が用意されていて、第一引数（slick）にはイベントオブジェクトが、第二引数（direction）にはスライダーの情報が入ってきます。

$('スライダー').on('swipe', function(slick,direction) {
  //スライドをスワイプやマウスドラッグしたときに実行する処理を書く
});

$('スライダー').on('swipe', function(slick,direction) {

//スライドをスワイプやマウスドラッグしたときに実行する処理を書く

});

サンプルではスライドをスワイプやマウスドラッグしたときメッセージが表示されるように仕込んであります

『swipe』SAMPLE

①

②

③

触ってください

ベースとなるHTMLはこちら

<div class="slider">
  <div class="slider_item">①</div>
  <div class="slider_item">②</div>
  <div class="slider_item">③</div>
</div>
<div class="message">触ってください</div>

</div>

<div class="message">触ってください</div>

これはかなりシンプルな形ですが『swipe』イベントの中に処理を置いただけです。

<script>
  $(function() {
    var $slider = $('.slider');
    $slider.slick();
    $slider.on('swipe', function(slick, direction) {
      $('.message').fadeIn().text('触られました！').delay(500).fadeOut();
    });
  });
</script>

$(function() {

var $slider = $('.slider');

$slider.slick();

$slider.on('swipe', function(slick, direction) {

$('.message').fadeIn().text('触られました！').delay(500).fadeOut();

});

</script>

『lazyLoaded』イベント

『lazyLoaded』イベントは画像を遅延ロードしたときに処理を実行させることができます。

デフォルトで引数が用意されていて、第一引数（event）にはイベントオブジェクトが、第二引数（slick）にはスライダーの情報が、第三引数（image）には読み込んだ画像の情報が、第4引数（imageSource）には画像のパスが入ってきます。

$('スライダー').on('lazyLoaded', function(event,slick,image,imageSource) {
  //画像を遅延ロードしたときに実行する処理を書く
});

$('スライダー').on('lazyLoaded', function(event,slick,image,imageSource) {

//画像を遅延ロードしたときに実行する処理を書く

});

サンプルでは画像を遅延ロードしたときに読み込まれた画像名が表示されるように仕込んであります

『lazyLoaded』SAMPLE

ファイル名を表示

ベースとなるHTMLはこちら

<div class="slider">
  <div class="slider_item"><img data-lazy="img1.png" alt=""></div>
  <div class="slider_item"><img data-lazy="img2.png" alt=""></div>
  <div class="slider_item"><img data-lazy="img3.png" alt=""></div>
</div>
<div class="message">ファイル名を表示</div>

</div>

<div class="message">ファイル名を表示</div>

『lazyLoaded』イベントの中に処理を置いただけです。

<script>
  $(function() {
    var $slider = $('.slider');
    $slider.slick({
      lazyLoad: 'ondemand',
    });
    $slider.on('lazyLoaded', function(event, slick, image, imageSource) {
      $('.message').append('<p>'+imageSource+'を表示</p>');
    });
  });
</script>

$(function() {

var $slider = $('.slider');

$slider.slick({

lazyLoad: 'ondemand',

});

$slider.on('lazyLoaded', function(event, slick, image, imageSource) {

$('.message').append('<p>'+imageSource+'を表示</p>');

});

</script>

『lazyLoadError』イベント

『lazyLoadError』イベントは画像を遅延ロードに失敗したときに処理を実行させることができます。

$('スライダー').on('lazyLoadError', function(event,slick,image,imageSource) {
  //画像を遅延ロードに失敗したときに実行する処理を書く
});

$('スライダー').on('lazyLoadError', function(event,slick,image,imageSource) {

//画像を遅延ロードに失敗したときに実行する処理を書く

});

サンプルでは画像を遅延ロードに失敗したときに読み込めなかった画像名が表示されるように仕込んであります

『lazyLoadError』SAMPLE

ファイル名を表示

ベースとなるHTMLはこちら

<div class="slider">
  <div class="slider_item"><img data-lazy="img1.png" alt=""></div>
  <div class="slider_item"><img data-lazy="img0.png" alt=""></div><!--存在しない画像-->
  <div class="slider_item"><img data-lazy="img2.png" alt=""></div>
  <div class="slider_item"><img data-lazy="img3.png" alt=""></div>
</div>
<div class="message">ファイル名を表示</div>

</div>

<div class="message">ファイル名を表示</div>

『lazyLoadError』イベントの中に処理を置いただけです。

<script>
  $(function() {
    var $slider = $('.slider');
    $slider.slick({
      lazyLoad: 'ondemand',
    });
    $slider.on('lazyLoadError', function(event, slick, image, imageSource) {
      $('.message').append('<p>' + imageSource + 'を表示できません</p>');
    });
  });
</script>

$(function() {

var $slider = $('.slider');

$slider.slick({

lazyLoad: 'ondemand',

});

$slider.on('lazyLoadError', function(event, slick, image, imageSource) {

$('.message').append('<p>' + imageSource + 'を表示できません</p>');

});

</script>

『slick』のイベントをサンプル付きで細かくまとめました

slickのイベント一覧

『afterChange』イベント

『beforeChange』イベント

『breakpoint』イベント

『destroy』イベント

『edge』イベント

『init』イベント

『reInit』イベント

『setPosition』イベント

『swipe』イベント

『lazyLoaded』イベント

『lazyLoadError』イベント

『slick』の基本的な使い方（オプションなど）を細かくまとめていく

CSSだけでスライドショー

swiper.js（8.1.4）を使ってゆっくり等速で流れる無限ループスライダーを作ってみました

IEにはそろそろ別れを告げたいのでIEのユーザーだけリダイレクトしてみた

slickの矢印ナビをカスタマイズ方法を紹介しようと思う