slickでのスライダーの実装方法と注意点

こんにちは、koyaです。
ライズウィルに入社してから早くも四半期が過ぎ、夏になってしまいました。
みなさんは夏と冬どちらが好きですか?
僕は夏場はすぐ脱水状態になってしまうので苦手です。。。意識的に水分補給していきましょう。

さて、普段業務の中でスライダーを実装したいという機会は多いと思いますが、今回は僕がよく使うslickを例にスライダーの実装方法と注意点を共有します。

slickとは

slickはjQueryベースのレスポンシブ対応をしている多機能スライダープラグインです。
スライダーのプラグインは何個かありますが、Githubスター数を見る限り、slickがおそらく一番有名なスライダープラグインです。
<公式サイト>
https://kenwheeler.github.io/slick/

導入方法

公式サイトからダウンロード、またはCDNを利用することができます。

ダウンロードの場合


head
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
footer
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>


CDNを利用する場合


head
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
footer
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>


上記を設定後、以下のように記述することでスライダーが動作します。クラス名は任意の物に変更してください。


<div class="class-name">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

<script type="text/javascript">
$(document).ready(function(){
$('.class-name').slick({
setting-name: setting-value
});
});
</script>

各種設定

上記のsetting-name: setting-value部分はslickの設定項目を記述する部分です。
よく使う機能を以下にまとめます。

setting-name 初期値 機能
autoplay false 自動再生機能のON/OFF
autoplaySpeed 3000 再生速度のミリ秒設定
arrows true 左右の矢印表示
centerMode false 両端が見切れたデザインに変更
cssEase ease イージングの設定
dots false スライダー下のドット表示ON/OFF
infinite true 無限スクロールのON/OFF
lazyLoad ondemand 遅延読み込みの設定。
ondemandの場合はスライド時に画像の読み込みが発生。
pauseOnFocus true スライダーをクリックした際に自動再生の一時停止
pauseOnHover true スライダーをホバーした際に自動再生の一時停止


他にもたくさんの機能があるので、気になる方は公式サイトを確認してみてください。

実装例

1枚画像のスライダー



複数画像のスライダー



フェードで切り替わるスライダー



レスポンシブで枚数が可変するスライダー(横幅を変更して確認してください)



スライダーを実装する上での注意点

自動再生はPCのみに適用する

SPを利用している際に自動再生がONになっていると、意図しないスライドをタップしてしまう場合があるのでPC/SPで切り分けておきましょう。
SPではスワイプをONにするのが親切です。

dots(現在地)を表示する

スライドが全体で何枚あり、現在何枚目なのかをユーザーに伝えることで、スライドを最後まで見てもらえる可能性が高まります。

矢印は要素内に表示する

slickの初期設定では、前後の矢印は要素外に表示されていますが、ブラウザサイズやデバイスサイズによっては表示されなくなってしまいます。
要素内に表示することで、どの画面サイズでも表示されるように設定しましょう。

スライドの最大数を5枚以内に収める

こちらもスライドを最後まで見てもらえる可能性を高めるためには必要です。
スライドは3〜5枚が適切と言われています。

スライダー領域の高さを予め確保する

slickなどのライブラリを使う場合、スライダー領域の高さを指定しないと、ライブラリを読み込むまでと読み込んだ後で高さのズレが発生します。
これによってCLS(Core Web Vitals)の低下に繋がるので、cssで高さを指定しておきましょう。

lazyLoadを設定する

ファーストビューで表示されない画像に関してはlazyLoadを設定し、遅延読み込みをしましょう。これを設定するだけでも少しだけサイトが軽くなります。
valueをondemandに設定し、<img data-lazy=”パス”> と記述することで遅延読み込みをすることができます。

PCとSPの画像表示をCSSで出し分けをしない

スライダーは、レスポンシブ対応をした際に画像サイズが気になる場合があります。
CSSで画像の表示/非表示を設定しているサイトなどをたまに見かけますが、画像をPC/SP分で2倍読み込んでしまうため好ましくありません。
srcsetやpicture要素を使うことで画面幅ごとに画像の出し分けが可能なため、こちらで対応しましょう。
<参考>
https://developer.mozilla.org/ja/docs/Web/HTML/Element/picture

まとめ

スライダーはWebサイトのパフォーマンスを下げると言われていますが、実装方法を少し変えるだけで改善が見込めます。
実装する際には案件や要件に合わせつつ、アンチパターンを避けた実装方法でパフォーマンスを高めていきましょう。
株式会社ライズウィル

株式会社ライズウィル

〒103-0013
東京都中央区日本橋人形町2-15-1
フジタ人形町ビル7F
TEL : 03-4590-3200
FAX : 03-4590-3201
E-Mail : info@risewill.co.jp
URL : https://www.risewill.co.jp