[slick.js]自動で延々回り続けるスライダーを作る

たまーに見るやつ。

完成イメージ
ライブラリ
やりかた
注意点

完成イメージ

複数枚表示のスライドがあったとして、それが一時停止とかせずに一定速度で自動で回り続けるやつ。

ページトップとかに設置する画像スライダーとは役割が違う、何かいっぱいあるんですよこんなのあるんですよをなんとなく雰囲気を見せていくためとかに合いそうな、そんなやつ。

ライブラリ

最近ずっと頼りっぱなしのslick.jsでやっていく。

こちらの設定ミスでもない限りは安定して動いてくれる、どんな状況でも対応できる、いい子。

slick - the last carousel you'll ever need

slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping ...

やりかた

optionの設定だけで完結する。

    $('.slider').slick({
        swipe: false,
        arrows: false,
        autoplay: true,
        autoplaySpeed: 0,
        speed: 10000,
        cssEase: 'linear',
        slidesToShow: 4,
        slidesToScroll: 1,
    });

要するに、停止時間を0にすればいい（autoplaySpeed）。で、初期状態ではスライド動作に緩急が付いてるんで一定速度を指定（cssEase: ‘linear’）。自動で回ってほしいからユーザーによる遷移ギミックを無効化。

都度導入時にいじるとすれば、遷移速度（speed）と表示枚数（slidesToShow）の２つ。レスポンシブ対応でbreakpointを作って表示枚数を変更するとかね。

っていう小ネタ。

注意点

これは「勝手に回り続けるもの」として使用することに限定しないといけない。

というのも、矢印とかスワイプとかが効かない。

スライドが動いているときは遷移の処理中になるし、処理中は操作を受け付けていないということになる。受付時間は0なのでユーザー側は眺めるだけかスライドのリンクをクリックすることしかできない。スライドの操作はできないということ。もし操作できたとしても遷移時間は自動再生のものが流用されるのでめちゃくちゃ遅い。微妙どころの話じゃない。

ずっと流れ続けるスライドを作って、それにユーザー操作を加えたいってなるとslick.jsだと限界がある。slick.jsじゃなくても結構難しいと思う。スワイプ機能を追加したものを自作してる記事とかあったけど、読んで見る限りすごいレアっぽい感じがあったんで、やっぱり一般的に需要も供給もそもそもない、稀なやつなんだなーって感じがある。ほんとに自作できたらいいんだけど、それでも作る手間は相当なのでできればライブラリを使用して時短に努めたいけど、クライアントの要望との兼ね合いでめんどくさいよねってなる。

かなりピーキーだと思う。