Weblasts

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

slickのイベント一覧

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

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

イベント名 使える引数 イベントの説明
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)には表示中のスライドの情報が入ってきます。

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

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

『afterChange』SAMPLE
何枚目を表示しているか

ベースとなるHTMLはこちら

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

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

『beforeChange』イベント

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

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

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

『beforeChange』SAMPLE
何枚目から移動したか

ベースとなるHTMLはこちら

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

『breakpoint』イベント

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

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

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

『breakpoint』SAMPLE
ブレイクポイント判定

ベースとなるHTMLはこちら

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

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

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

『destroy』イベント

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

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

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

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

『destroy』SAMPLE
解除

ベースとなるHTMLはこちら

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

『edge』イベント

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

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

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

『edge』SAMPLE
両端をドラッグすると

ベースとなるHTMLはこちら

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

『init』イベント

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

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

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

『init』SAMPLE

ベースとなるHTMLはこちら

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

『reInit』イベント

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

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

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

『reInit』SAMPLE
リロードボタン

ベースとなるHTMLはこちら

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

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

『setPosition』イベント

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

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

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

『setPosition』SAMPLE
テスト開始

ベースとなるHTMLはこちら

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

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

『swipe』イベント

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

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

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

『swipe』SAMPLE
触ってください

ベースとなるHTMLはこちら

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

『lazyLoaded』イベント

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

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

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

『lazyLoaded』SAMPLE
ファイル名を表示

ベースとなるHTMLはこちら

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

『lazyLoadError』イベント

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

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

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

『lazyLoadError』SAMPLE
ファイル名を表示

ベースとなるHTMLはこちら

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

PROFILE

フリーランスでweb系のデザイン・コーディング&プログラミングをしています

youtubeはじめました