Slickスライダーの使い方と注意点

Pocket

slickって？
使い方
ところどころ別の方法でも実装ができるんです
- （1）～（2）を省略
- （5）の宣言を外部ファイルに記述
オプションの設定
注意点
- <ul><li>は使用しないほうがいい
- 自分のcss、jsは、slickの後に読み込ませる

slickって？

カンタンにスライダーを実装できるjQueryライブラリです。
slickの関連ファイルを読み込ませるだけで動くので、難しい記述一切なしに作れるのが強み。

今回は、初心者向けに、slickの使い方を解説していきます！

使い方

（1）Slickのフォルダをダウンロードする

https://kenwheeler.github.io/slick/#go-get-it

上記リンクの、「Download Now」のボタンから、zipフォルダをダウンロードします。

（2）必要なファイルを自分のファイルに移動させる

ダウンロードしたファイルの中身は、
サンプルファイルなど、実装に不要なものも多いので、必要なファイルだけを選別します。

使うのは、「slick」フォルダの中に入っている、

fonts フォルダ
→　デフォルトのページネーションなどに使われているwebフォントが読み込めます
ajax-loader.gif
→　スライドを読み込むときに読み込みマークを出せます
slick.css
→　slick用のcssその1。これがないと正しく動いてくれません。
slick-theme.css
→　slick用のcssその2。見た目を整えてくれます。
slick.js
→ slick用のjs。これがないとそもそも動きません。サイトの容量を減らしたい場合はminファイルでもOK

上記の5つです。

この5つを、自分の制作データの必要な箇所に移動させます。

※fontsフォルダ、ajax-loader.gif を移動させる場合は、cssファイルと同じ階層である状態を維持させたまま移動させてください。

（3）htmlでjQueryとslickを読み込ませる

そして、htmlファイルで、slickのファイルを読み込ませましょう。

たとえば、cssはcssフォルダの中に、jsはjsフォルダの中に入れたのであれば、

<link rel="stylesheet" type="text/css" href="css/slick.css"/>
<link rel="stylesheet" type="text/css" href="css/slick-theme.css"/>

<script type="text/javascript" src="js/slick.js"></script>

こんな感じに書きます。ファイルのパスは、自分の制作データの構成に合ったものにしましょう。

（4）jQueryを読み込ませる

slickを動かすには、jQueryというものを読み込ませる必要があります。
先ほど</body>の直前に書いたslickのjsを読み込ませる記述の前で読み込ませてみましょう。
slickのjsを動かすのにjQueryが必要なので、順番を間違えると動きません。

<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
<script type="text/javascript" src="js/slick.js"></script>

最終的に、</body>の直前にはこのように書かれていることになります。

（5）動かすための宣言を書く

これで準備は整いました。あとは「動いて！」と宣言をするだけです。

htmlに

<div class="slider">
  <div class="image"><img src="img.jpg"></div>
  <div class="image"><img src="img.jpg"></div>
  <div class="image"><img src="img.jpg"></div>
</div>

と書いておき、さらに</body>タグの直前に、

<script>
  $('.slider').slick();
</script>

と書いてみましょう。
「$(‘.slider’)」の部分は、動かしたいスライダーのhtmlのセレクタと一致している必要があります。

今回は「<div class=”slider”>」に対して設置するので「$(‘.slider’)」と指定します。

「<div id=”slick”>」に設置をするよという場合は、こちらも「$(‘#slick’)」という書き方になります。

cssと同じような考えですね。

（6）動いた！

最終的に、htmlは以下のようになっています。

<!doctype html>
<html>
    <head>
        <!-- slick用のcssの読み込みここから -->
        <link rel="stylesheet" type="text/css" href="css/slick.css" />
        <link rel="stylesheet" type="text/css" href="css/slick-theme.css" />
        <!-- slick用のcssの読み込みここまで -->
    </head>
    <body>
        <div class="slider">
            <div class="image"><img src="img.jpg"></div>
            <div class="image"><img src="img.jpg"></div>
            <div class="image"><img src="img.jpg"></div>
        </div>
    <!-- jqueryの読み込み -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
    <!-- slick用のjs読み込み -->
    <script type="text/javascript" src="js/slick.js"></script>
    <!-- slick動かす命令ここから -->
    <script>
        $('.slider').slick();
    </script>
    <!-- slick動かす命令ここまで -->
    </body>
</html>

ところどころ別の方法でも実装ができるんです

（1）～（2）を省略

今回、slickファイル一式をダウンロードしましたが、オンライン上にあるslickのデータを読み込むことで、slick一式をダウンロードしなくてもスライダーを実装できるんです。

その場合、（3）で書いた、css/jsの読み込ませ方は以下のように変わります。

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

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

（4）以下は同様の進め方です。slickをいちいちダウンロードしなくて良いので楽ちんですが、インターネットがつながった環境でないと動かないので注意。

（5）の宣言を外部ファイルに記述

スライダーの実行宣言を</body>の直前で行いましたが、別のjsファイルを作ってそこで実行宣言しても動きます。

その場合、そのjsファイルをslickの後に読み込むのを忘れないようにしてくださいね！

オプションの設定

デフォルトの状態だと、自動でスライドしないし、矢印もページネーションも出てきません。
そういった装飾は、オプションでつけていきます。

たとえば、

自動で再生されるようにする
左右に矢印をつける

ようにしたい場合は、

<script>
　$('.slider').slick();
</script>

この部分を以下のように書き換えます。

<script> 
  $('.slider').slick({
    autoplay:true,
    arrows:true,
  }); 
</script>

オプションは大量にあるので、自分のイメージに合ったスライダーにカスタマイズしてみましょう。

オプション	説明	初期値
accessibility	タブと矢印キーのナビゲーション	true
adaptiveHeight	スライドの高さの自動調整	false
autoplay	自動再生	false
autoplaySpeed	自動再生のスピード（ミリ秒単位）	3000
arrows	スライドの左右の矢印ボタン	true
asNavFor	スライダを他のスライダのナビゲーションに設定する（class名またはID名）	null
appendArrows	スライドの左右の矢印ボタンを挿入する場所を変更	$(element)
appendDots	ドットインジケーターの場所変更	$(element)
prevArrow	左の矢印ボタンのHTMLをカスタマイズ	<button type=”button” class=”slick-prev”>Previous</button>
nextArrow	右の矢印ボタンのHTMLをカスタマイズ	<button type=”button” class=”slick-next”>Next</button>
centerMode	スライドを中心に表示して部分的に前後のスライドが見えるように設定（奇数番号のスライドに使用）	false
centerPadding	センターモード時のサイドパディング。見切れるスライドの幅。’px’または’％’。	50px
cssEase	CSS3アニメーションイージングを設定	ease
customPaging	dots:trueのとき、ドットをカスタマイズ	n/a
dots	ドットインジケーターの表示	false
dotsClass	ドットインジケーターのクラス名を設定	slick-dots
draggable	マウスでのドラッグ設定	true
fade	スライダーの切り替えをスライドではなくフェイドインにするか	false
focusOnSelect	クリックでのスライド切り替えを有効にするか	false
easing	jQueryアニメーションイージングを追加	linear
edgeFriction	infinite:falseのときに最初と最後のスライドをスワイプした時のフリクション値を設定	0.15
infinite	スライドのループを有効にするか	true
initialSlide	スライドの開始番号	0
lazyLoad	画像の遅延読み込みを設定（’ondemand’もしくは’progressive’）	ondemand
mobileFirst	レスポンシブの設定でモバイルの計算を優先させる	false
pauseOnFocus	自動再生時にスライドにフォーカスした際、自動再生をストップさせるか	true
pauseOnHover	自動再生時にスライドにマウスオーバーした際、自動再生をストップさせるか	true
pauseOnDotsHover	自動再生時にドットインジケーターにマウスオーバーした際、自動再生をストップさせるか	false
respondTo	レスポンシブの基準を設定（’window’もしくは’slider’もしくは’min’）	window
responsive	breakpointで設定したいブレイクポイントを設定（settingsで画面サイズがブレイクポイントで設定した範囲内になったら振り分ける処理を設定）	none
rows	スライドの行数を設定（slidesPerRowを使用して、各行に含めるスライドの数を設定）	1
slide	スライドとして使用する要素を設定	”
slidesPerRow	rowsオプションで2以上が設定されている際、各行にいくつのスライドを表示するか設定	1
slidesToShow	表示するスライド数を設定	1
slidesToScroll	スクロールするスライド数を設定	1
speed	スライド/フェードアニメーションの速度を設定	300
swipe	スワイプを有効にするか	true
swipeToSlide	slidesToScrollの設定に関係なく、ユーザーがスライドを直接ドラッグまたはスワイプした場合は1スライドずつ動かす	false
touchMove	タッチでスライドさせるか	true
touchThreshold	スワイプでスライドさせる距離を設定（1 / touchThreshold）*スライダの幅	5
useCSS	CSS traditionを有効にするか	true
useTransform	CSS transformを有効にするか	true
variableWidth	可変幅のスライド（スライドの幅をバラバラにするか）	false
vertical	垂直スライドモード	false
verticalSwiping	垂直のスワイプを有効にするか	false
rtl	スライダの方向を右から左に変更するか（right to left）	false
waitForAnimate	スライドアニメーション中にスライドを前後させる要求を無視するか	true
zIndex	スライドの重なり順	1000

注意点

<ul><li>は使用しないほうがいい

スライダーって、リストタグを使いたくなってしまうと思うんですが、
slickでは使用しないほうがいいです。

何故なら、slickを実装すると、自動でタグが色々出力されるため、<ul>直下に<li>を置く、という構造が崩れてしまうためです。
実際に実装して検証ツールで見てみると、その問題が確認できると思います。

<div>で構成しておくほうがおすすめです。

自分のcss、jsは、slickの後に読み込ませる

slickの記述の前に自分で書いたcssやjsを読み込ませると、slickのファイルで上書きされてしまって表示が崩れる可能性があります。

自分で書いたcssやjsがある場合は、slick一式のファイル以降に読み込ませましょう。

よいスライダーライフを！