MENU

NEWS
ニュース

【slick】スライダーのカスタマイズ方法〜上級編〜

スライダーのカスタマイズ方法〜上級編〜

こちらではslickスライダーの設定においてなかなか使うことのない「イベント」について解説して、実際の使用例をご紹介したいと思います。

slickのイベントについて

簡単にいうと「○○したときにXXする」という処理を指定できるのがslickのイベントであり、この○○のバリエーションをslickが用意してくれているというわけです。
代表的なものをご紹介します。

イベント名 概要
beforeChange(afterChange) スライドが切り替わる前(後)に発生
breakpoint 設定したブレイクポイントに到達したら発生
init 最初の初期化後に発生
setPosition 位置・サイズの変更後に発生
swipe スワイプ・ドラッグ後に発生

使い方はこうです。各スライドや画像ではなく、スライダー本体(サンプルだと.slider01ですね)を指定するのがミソのようです。

$(スライダー本体のセレクタ).(‘イベント名’, function(){ 処理 });

下記の例では画像が中央にくるときに大きくなる、という動きをつけています。

切り替わる前のスライドのサイズを小さくしておき、切り替わると100%の大きさになるように調整しました。
beforeChangeとafterChangeでそれぞれクラスの切り替えをしておかないと、画像が大きくなったままになるので注意が必要です。

PAGETOP