Slick.js徹底解説 [イベント編]
Slick.jsにはいくつかのイベントが用意されています。
イベントを使用する事で、スライダーの状態や動作に応じて、動的にコードを実行することができます。
たとえば、beforeChangeイベントを使用して、スライドが切り替わる前に、何らかのアニメーションを実行することができます。また、edgeイベントを使用して、スライダーが端に到達したときに、他の要素を表示するなどの操作を行うこともできます。
イベント一覧
afterChange
| 引数 | slick, currentSlide |
| 説明 | スライドが切り替わった後に発火 |
beforeChange
| 引数 | slick, currentSlide, nextSlide |
| 説明 | スライドが切り替わる前に発火 |
breakpoint
| 引数 | event, slick, breakpoint |
| 説明 | レスポンシブ対応のスライダーで、ブレイクポイントが切り替わったときに発火します。 オプションの responsiveで設定したブレイクポイントに反応します。 |
destroy
| 引数 | event, slick |
| 説明 | スライダーは破棄、またはunslickされた時に発火します。 |
edge
| 引数 | slick, direction |
| 説明 | オプションでinfinitie:falseとした場合に、最後のスライドから次に移動しようとした時に発火します。 |
init
| 引数 | slick, direction |
| 説明 | スライダーが初期化slick();された時に発火します。 |
setPosition
| 引数 | slick |
| 説明 | スライダー内で何らかの変更が発生した時に発火します。 ・初期化時 ・ウィンドウサイズの変更でカルーセルのレイアウトが再計算される時 ・オプション、スライドの追加/削除 ・スライドの遷移時 |
イベントを使ってカスタマイズ
イベントを使って、ドット部分をプログレスバーに、現在のスライドを数字にカスタマイズしてみました。
プログレスバーはCSSキーフレームで表現しましたが、最初のスライドのみ時間が短いためCSSアニメーションが若干噛み合わないので、一番最初のスライドのみアニメーション時間を短くしています。（おそらく、１スライド目のみアニメーション時間が無いため?）