slickを使った、ゆっくり等速で流れる無限ループスライダーの作り方と注意点
どの画面幅でも必ず特定の画像を中心にした状態でスタートさせる、回転寿司のレーンのような無限ループスライダーの依頼があったのでjQueryプラグイン『slick』を利用し実装しました。
そのときに気づいた注意点やコードを備忘録的に残していくことにします。
無限ループスライダーの作り方
以下のサンプルの通りゆっくりと無限にループするスライダーを実装します
このように要素の幅いっぱいに広げて等速で動き続けさせます。
このサンプルでは0番から6番までの7枚の画像を使い、必ずスタート時に３番の画像が中心に来るように調整しています。
基本となるコード
まずはslickを読み込んでいきます。
読み込み方法は何でもいいですが、ここではhead要素内にCDNで読み込む形を取りました。
|
1 2 3 |
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> |
次に無限ループスライダーになる部分を作ります。
色々なサイトで紹介されている形で問題ないと思います。
|
1 2 3 4 5 6 7 8 9 |
<div class="slider"> <div class="img"><img src="bird1.png" alt=""></div> <div class="img"><img src="bird2.png" alt=""></div> <div class="img"><img src="bird3.png" alt=""></div> <div class="img"><img src="bird4.png" alt=""></div> <div class="img"><img src="bird5.png" alt=""></div> <div class="img"><img src="bird6.png" alt=""></div> <div class="img"><img src="bird7.png" alt=""></div> </div> |
|
1 2 3 |
.slider div { width: 200px; } |
head要素の最後にscript要素を作り実行させるコードを入れていきます。
これで動き始めます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> $(function() { $('.slider').slick({ autoplay: true,//自動でスライドさせる autoplaySpeed: 0,//次の画像に切り替えるまでの時間 今回の場合は0 speed: 8000,//画像が切り替わるまでの時間 今回の場合は難病で1枚分動くか cssEase: 'linear',//動きの種類は等速に arrows:false,//左右に出る矢印を非表示 swipe: false,//スワイプ禁止 pauseOnFocus: false,//フォーカスが合っても止めない pauseOnHover: false,//hoverしても止めない centerMode: true,//一枚目を中心に表示させる initialSlide: 3,//最初に表示させる要素の番号を指定 variableWidth: true,//スライドの要素の幅をcssで設定できるようにする }); }); </script> |
結構多くのオプションを入れていますが、最初に表示させる画像はHTMLでマークアップした順番でいいよって場合は「initialSlide」と「centerMode」は省略可能です。
「arrows」と「swipe」は実際に触ったときに再始動に時間がかかるので切っておくと安定します。
「pauseOnFocus」と「pauseOnHover」はゆっくり動かしている場合、止まるまでに時間がかかりすぎるのでないほうがいいと思います。
「initialSlide」を指定するときは注意が必要で、順番を数えるときは0から順番を考えます
HTMLでマークアップした順番でそのまま指定するとひとつずれるので気をつけてください
|
1 2 3 4 5 6 7 8 9 |
<div class="slider"> <div class="img"><img src="bird1.png" alt=""></div><!--0番--> <div class="img"><img src="bird2.png" alt=""></div><!--1番--> <div class="img"><img src="bird3.png" alt=""></div><!--2番--> <div class="img"><img src="bird4.png" alt=""></div><!--3番--> <div class="img"><img src="bird5.png" alt=""></div><!--4番--> <div class="img"><img src="bird6.png" alt=""></div><!--5番--> <div class="img"><img src="bird7.png" alt=""></div><!--6番--> </div> |
注意点
上のサンプルでは対応済みですがslickを使って無限ループスライダーを実装すると「firefox」「IE」「ios safari」は問題なく動きますが、「Chrome」「Edge」「opera」で画像がぼやけた感じになります。
検索しても見つかるサイトはぼやけたままになっているか、サンプルなし
「autoplay」を切ってもこの症状は改善されません。
確実な原因の特定はできていませんが、cssを追加するだけで問題が解決します
backface-visibilityプロパティ
この「backface-visibility」は要素がユーザーに対して裏側を向いたときに、裏面を可視にするかどうかを設定するプロパティです。
|
1 2 3 4 |
element{ backface-visibility: visible;/*初期値 背面が可視になる*/ backface-visibility: hidden;/*背面が非表示になる*/ } |
imgに対してこちらのプロパティを使い、値に「hidden」指定すれば問題は解決します。
|
1 2 3 |
.slider img { backface-visibility: hidden;/*追加*/ } |
少し面倒ですが無限ループするスライダーをslickで実装したいのならば覚えておきたい部分ですね。
