【slick】スライダーのカスタマイズ方法〜上級編〜
スライダーのカスタマイズ方法〜上級編〜
こちらではslickスライダーの設定においてなかなか使うことのない「イベント」について解説して、実際の使用例をご紹介したいと思います。
slickのイベントについて
簡単にいうと「○○したときにXXする」という処理を指定できるのがslickのイベントであり、この○○のバリエーションをslickが用意してくれているというわけです。
代表的なものをご紹介します。
| イベント名 | 概要 |
|---|---|
| beforeChange(afterChange) | スライドが切り替わる前（後）に発生 |
| breakpoint | 設定したブレイクポイントに到達したら発生 |
| init | 最初の初期化後に発生 |
| setPosition | 位置・サイズの変更後に発生 |
| swipe | スワイプ・ドラッグ後に発生 |
使い方はこうです。各スライドや画像ではなく、スライダー本体（サンプルだと.slider01ですね）を指定するのがミソのようです。
$(スライダー本体のセレクタ).(‘イベント名’, function(){ 処理 });
下記の例では画像が中央にくるときに大きくなる、という動きをつけています。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
[common.js]
$(‘.slick01’).on(‘beforeChange’, function(){
$(‘.slick-current’).removeClass(‘is–active’);
});
$(‘.slick01’).on(‘afterChange’, function(){
$(‘.slick-current’).addClass(‘is–active’);
});
[common.css]
.slick–slide {
–webkit–transition: 0.3s ease–in–out;
transition: 0.3s ease–in–out;
transform: scale( .75 );
}
.is—active {
transform: scale( 1 );
}
|
切り替わる前のスライドのサイズを小さくしておき、切り替わると100％の大きさになるように調整しました。
beforeChangeとafterChangeでそれぞれクラスの切り替えをしておかないと、画像が大きくなったままになるので注意が必要です。
