slickを使ってスライダーを作ろう【初級編④】

はじめに

今回は、slickというプラグインを使ってシンプルなスライダーを制作していきます。下記は、制作するスライダーのワイヤーフレームです。ここから更に装飾や動きについて考えていきます。

slickの使い方

slickとは

slickとは、「スライダーを作るためのプラグイン」です。レスポンシブにも対応しており、カスタマイズの幅も広いため、世界中で使用されています。

slickで何ができるの？

slickを使えば、文字や画像が切り替わるスライダーを簡単に作成することができます。特にカルーセル（真横にスライドするスライダー）に関するオプションが豊富でカスタマイズしやすいです。

slickの導入方法

slickを使うには、大きく分けて「CDNを使う」か「ファイルをダウンロードする」かの２通りがあります。

どちらの場合でも必要なのが「slick.min.js」と「slick.css」です。slickは、jQueryベースのプラグインなので、必ずjQueryファイルを作成します。

①ファイルをダウンロードする場合

ファイルをダウンロードする場合は、公式サイトの「get it now」をクリックします。

次に「Download now」をクリックします。Zipファイルがアップロードされるので、解凍し中にあるslick.min.jsとslick.cssを各ファイルに入れます。

読み込む順番に注意してhead内に記載していきます。

<link rel="stylesheet" href="css/slick.css" />
<link rel="stylesheet" href="css/style.css" />

<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script src="js/slick.min.js"></script>
<script src="js/main.js"></script>

②CDNの場合

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />

<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="js/main.js"></script>

HTMLのhead内に上記をコピペするだけです。ですが、この方法だとオフライン環境では使えない（＝ローカルで検証できない）といったデメリットがあります。jsファイルの記載場所は、bodyタグの手前に配置します。

今回は、②のCDNを使用する方法で、進めていきます。

slickの基本編

HTML5の書き方

<div class="slider">
  <div>スライド1</div>
  <div>スライド2</div>
  <div>スライド3</div>
</div>

jQueryの書き方

$(function(){
  $('.slider').slick();
  // その他のオプション
});

slickのオプション一覧

コードを書く際に、知っておくと便利なオプションをまとめました。

表示に関するオプション

項目	仕様
arrows	左右矢印を表示する。
dots	ページ送りを表示する。
slidesToShow	スライダーの表示数
slideToScroll	一度にスクロールする数。

動きに関するオプション

項目	仕様
infinite	無限にスライドする。
fade	スライド切り替え時にフェードイン・アウトする。
speed	フェードのスピード。
autoplay	自動再生する。
autoplaySpeed	自動再生時のスライド切り替えのスピード。
vertical	縦方向にスライドする。

ユーザーの操作に関するオプション

項目	仕様
accessibility	タブまたは矢印でスライドの切り替えができる。
swipe	スワイプできる。
verticalSwiping	垂直方向にスワイプできる。
focusOnSelect	コンテンツをタッチすると中央に移動する。
pauseOnHover	マウスオーバー中は、スライドを停止する。
pauseOnFocus	スライダーのドットをクリックした時に自動再生を一時停止する。

カスタマイズのためのオプション

項目	仕様
prevArrow	前矢印のHTMLカスタマイズ。
nextArrow	後矢印のHTMLカスタマイズ。

<!-- 前矢印 -->
<button type="button" class="slick-prev">Previous</button>
<!-- 後矢印 -->
<button type="button" class="slick-next">Next</button>

slickの実践編

See the Pen slickを使ってスライダーを作ろう by Uka Suzuki (@uukasuzuki_) on CodePen.

疑問

今回の制作で、疑問が２つあります。

①スライダーの矢印が表示できません。jsファイルにarrowsと記載していますが、隠れているのか、反映されませんでした。

②HTMLに記載するため、画像のURLを取得したいです。フリー写真のURLをHTMLに記載するためにはどうやればいいでしょうか？

まとめ

display: flex;など使わなくても自然に横並びにしてくれる機能は使いやすいと感じました。今後、オプションを覚えながらもっと動きをつけていきたいです。