Weblasts

slickを使った、ゆっくり等速で流れる無限ループスライダーの作り方と注意点

無限ループスライダーの作り方

以下のサンプルの通りゆっくりと無限にループするスライダーを実装します

サンプル

このように要素の幅いっぱいに広げて等速で動き続けさせます。

このサンプルでは0番から6番までの7枚の画像を使い、必ずスタート時に3番の画像が中心に来るように調整しています。

基本となるコード

まずはslickを読み込んでいきます。
読み込み方法は何でもいいですが、ここではhead要素内にCDNで読み込む形を取りました。

次に無限ループスライダーになる部分を作ります。
色々なサイトで紹介されている形で問題ないと思います。

cssは場合によっては必要ないと思いますが、スライドさせる要素に幅を設定してあげるといいと思います。 スライドさせる要素の幅がばらばらだと動くスピードが途中ずれることがあるので指定しておけば安心かと思います。

head要素の最後にscript要素を作り実行させるコードを入れていきます。
これで動き始めます。

結構多くのオプションを入れていますが、最初に表示させる画像はHTMLでマークアップした順番でいいよって場合は「initialSlide」と「centerMode」は省略可能です。

「arrows」と「swipe」は実際に触ったときに再始動に時間がかかるので切っておくと安定します。

「pauseOnFocus」と「pauseOnHover」はゆっくり動かしている場合、止まるまでに時間がかかりすぎるのでないほうがいいと思います。

「initialSlide」を指定するときは注意が必要で、順番を数えるときは0から順番を考えます
HTMLでマークアップした順番でそのまま指定するとひとつずれるので気をつけてください

注意点

上のサンプルでは対応済みですがslickを使って無限ループスライダーを実装すると「firefox」「IE」「ios safari」は問題なく動きますが、「Chrome」「Edge」「opera」で画像がぼやけた感じになります。

検索しても見つかるサイトはぼやけたままになっているか、サンプルなし
「autoplay」を切ってもこの症状は改善されません。

確実な原因の特定はできていませんが、cssを追加するだけで問題が解決します

backface-visibilityプロパティ

この「backface-visibility」は要素がユーザーに対して裏側を向いたときに、裏面を可視にするかどうかを設定するプロパティです。

imgに対してこちらのプロパティを使い、値に「hidden」指定すれば問題は解決します。

少し面倒ですが無限ループするスライダーをslickで実装したいのならば覚えておきたい部分ですね。