備忘録：SlickのAutoPlayで要素が画面内に現れたら動作させる方法

こんにちは
MaromaroのTakaです。

今回はjQueryの超有名プラグイン「Slick」でスライドの自動再生をONにしているときに、
要素が画面内に現れてから動かす方法について記載します。

通常、Slickの自動スライドはSlickが読み込まれた時点で作動してしまうので、
ドキュメントの下部の方にスライドがあった場合、
上から下にスクロールした時に既にスライドが何週かしてしまうというケースが起こることがあります。

大概はスライドの1番目から見せたいと思うので、
今回の要素が画面内に現れてから動作させるというのが役に立ちます。

やり方

Slickは以下からDownload Nowをクリックしダウンロードし、適宜配置してください。

Slickはこちら

まずは通常のデフォルトパターンを見てみましょう。

See the Pen Untitled by 佐々木貴徳 (@efhpwfmt-the-animator) on CodePen.

少し分かりづらいと思いますが、
読み込み時点でスライドが動いてしまっています。

これに対してデフォルトではAutoPlayを一時停止状態にし、
要素が画面内に入ったら一時停止を解除するという措置を取るようにします。

$("#slider").slick({
  autoplay: true,
  autoplaySpeed:500,
  dots: false,
  arrows: false,
  variableWidth: true,
  pauseOnFocus:false,
  pauseOnHover:false,
}).slick('slickPause');

See the Pen Untitled by 佐々木貴徳 (@efhpwfmt-the-animator) on CodePen.

単純に要素までの距離を取得し、以下の条件でAutoPlayが作動します。
ターゲット要素の上端がウィンドウの下端よりも上にある。
ターゲット要素の下端がウィンドウの上端よりも下にある。

読み込み時とスクロール動作時に発火するようになっています。
リキッドレイアウトの場合はresizeも追加するようにしてください。

以上Takaでした。