Slickでスライダー実装 - 私のコーデイングバイブル

SlickとはJqueryのライブラリの一つです。

ライブラリとは、特定の機能を持つプログラムを定型化して、他のプログラムが引用できるようにしたものを、複数集めてまとめたファイルのことです。

正直、JQueryって覚えるの大変です。

勉強しても一から何も見ずに構築するにはかなり時間がかかると思います。

ところが、ライブラリを使用すれば簡単にスライダーなどを実装することができます。

Slickの設定

Slickの設定にはCDN（コンテンツデリバリーネットワークの略で、大容量のデジタルコンテンツをインターネット上で大量配信するためのネットワークのこと）とファイルをダウンロードする方法があります。

CDNを使用する

公式サイトにアクセス　>>>　http://kenwheeler.github.io/slick/
「get it now」をクリック。
CDNをコピー＆ペーストする。
CSSは<head></head>の間に、JSは</body>の前に設置。

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

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

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

公式サイトにアクセス　>>>　http://kenwheeler.github.io/slick/
「get it now」をクリック。
「Download Now」をクリックしダウンロードされたzipファイルを解凍する。
使うファイルは以下の３つ
- slick-theme.css
- slick.css
- slick.min,js
それぞれを各フォルダにコピー＆ペーストして読み込む設定をする。

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

<script src="js/slick.min,jss"></script>

htmlの基本的な記述

画像は独自のものを入れてください。

<head>
 <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
</head>
<body>
//スライダーの中身
<div class="slick">
 <div><img src="https://images.unsplash.com/photo-1604065780813-1a33b65688fe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1333&q=80" ></div>
 <div><img src="https://images.unsplash.com/photo-1604065781162-602728f326a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1333&q=80" ></div>
 <div><img src="https://images.unsplash.com/photo-1522376382758-57cc8c505cdb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTgwfDB8MXxzZWFyY2h8NHx8V29ybGQlMjBIZXJpdGFnZSUyMFNpdGV8ZW58MHx8fHwxNjU2MjExNjYz&ixlib=rb-1.2.1&q=80&w=400" ></div>
 <div><img src="https://images.unsplash.com/photo-1599833975787-5c143f373c30?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTgwfDB8MXxzZWFyY2h8N3x8V29ybGQlMjBIZXJpdGFnZSUyMFNpdGV8ZW58MHx8fHwxNjU2MjExNjYz&ixlib=rb-1.2.1&q=80&w=400" ></div>
 <div><img src="https://images.unsplash.com/photo-1642864628335-0d48f61eccbb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTgwfDB8MXxzZWFyY2h8MzR8fFdvcmxkJTIwSGVyaXRhZ2UlMjBTaXRlfGVufDB8fHx8MTY1NjIxMTY2OA&ixlib=rb-1.2.1&q=80&w=400" ></div>
 <div><img src="https://images.unsplash.com/photo-1634324033315-68839fa5af16?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTgwfDB8MXxzZWFyY2h8Nzl8fFdvcmxkJTIwSGVyaXRhZ2UlMjBTaXRlfGVufDB8fHx8MTY1NjIxMTY4MQ&ixlib=rb-1.2.1&q=80&w=400" ></div>
 <div><img src="https://images.unsplash.com/photo-1551081857-d07794dea569?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTgwfDB8MXxzZWFyY2h8NzJ8fFdvcmxkJTIwSGVyaXRhZ2UlMjBTaXRlfGVufDB8fHx8MTY1NjIxMTY4MQ&ixlib=rb-1.2.1&q=80&w=400" ></div>
 <div><img src="https://images.unsplash.com/photo-1628488321763-eb2f79b7f3b5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTgwfDB8MXxzZWFyY2h8MTgyfHxXb3JsZCUyMEhlcml0YWdlJTIwU2l0ZXxlbnwwfHx8fDE2NTYyMTIyNzI&ixlib=rb-1.2.1&q=80&w=400" ></div>
</div>

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

オプションの設定

jQuery内に記述することでスライドするのか、フェードするのかなどを指定することができます。

$(document).ready(function(){
      $('slick').slick({
        //オプション: 値,を記述する
      });
});

accessibility	矢印キーで操作の有効（true）と無効（false）。初期値:true
adaptiveHeight	スライド毎に高さを変更する（true）変更しない（false）。初期値:false
autoplay	自動再生を有効（true）にするか無効（false）にするか。初期値:false
autoplaySpeed	自動再生の速度（ミリ秒）。小さいほど速くなる。初期値:3000（3秒）
arrows	前/次の矢印の表示（true）非表示（false）。初期値:true
asNavFor	スライダを他のスライダのナビゲーションになるように設定します（クラス名またはID名） asNavFor: ‘.クラス名’ 初期値:null
appendArrows	矢印の場所を変更する。 appendArrows: $(‘.矢印を生成するhtmlの場所のクラス名’) 初期値:$(element)
appendDots	ドットナビゲーションを付ける場所を変更する。dots:trueを忘れずに。初期値:$(element)
prevArrow	「前へ」矢印のカスタマイズができます。
nextArrow	「次へ」矢印のカスタマイズができます。
centerMode	前後のスライドを部分的に表示する（true）。値には奇数を使用してください。初期値:false
centerPadding	センターモードの時の両サイドのパディングをpxまたは％で指定します。初期値:’50px’
cssEase	CSS3のアニメーションイージングを指定します。 ‘ease-in’、’ease-out’、’linear’などがあります。初期値:’ease’
dots	ドットナビゲーターの表示（true）非表示（false）初期値:false
dotsClass	ドットナビゲーションのクラス名を指定できます。初期値:’slick-dots’
draggable	マウスドラッグ操作の有効（true）無効（false）。初期値:true
fade	フェード機能の有効（true）無効（false）。初期値:false
focusOnSelect	スライドをクリックするとフォーカスします（true）。初期値:false
easing	jQueryのanimate()のeasingを追加します。 ‘linear’と’swing’があります。初期値:’linear’
edgeFriction	スライドがループでない時の端をスワイプするときの抵抗値が指定できます。 infinite: falseを忘れずに。初期値:0.15
infinite	スライドのループを有効（true）、無効（false）にします。初期値:true
initialSlide	最初に表示するスライドを選択します。 initialSlide:5　//この場合6枚目が最初に表示されます。初期値:0
lazyLoad	遅延読み込みの設定ができます。 ‘ondemand’と’progressive’があります。初期値:’ondemand’
mobileFirst	レスポンシブ設定の際、一番幅の狭い設定のものを反映します（true）。初期値:false
pauseOnFocus	フォーカスをすると自動再生を一時停止する（true）。 autoplay: trueを忘れずに。初期値:true
pauseOnHover	スライドにホバーした時に自動再生を一時停止する。 autoplay: trueを忘れずに。初期値:true
pauseOnDotsHover	ドットナビゲーションにホバーした時に自動再生を一時停止する。 autoplay: true, dots:trueを忘れずに。初期値:false
respondTo	レスポンシブ設定時のブレークポイントの基準を選択します。 ‘window’、 ‘slider’、’min’（windowかsliderのどちらか小さい方）が選択できます。初期値:’window’
responsive	レスポンシブの設定ができます。初期値:none
rows	2以上に設定すると、グリッドモードになります。 slidesPerRowを使用して、各行のスライド数を設定できます。初期値:1
slide	スライドとして使用する要素を指定することができます。
slidesPerRow	グリッドモードの時に、各行のスライド数を設定できます。初期値:1
slidesToShow	一度に表示するスライドの数を指定できます。初期値:1
slidesToScroll	スライドをした際にスクロールされるスライドの数を指定できます。初期値:1
speed	スライドやフェードの時のアニメーションの速度を指定します。初期値:300（0.3秒）
swipe	スワイプを有効（true）、無効（false）に変更できます。初期値:true
swipeToSlide	ユーザーが直接ドラッグまたはスワイプできるようにする（true）。初期値:false
touchMove	タッチ操作でスライドがスクロールするようにします（true）。初期値:true
touchThreshold	スワイプでスライドを移動させる為の長さを指定します。（1 / touchThreshold）*スライダーの幅初期値:5
useCSS	CSS transitionを有効（true）/無効（false）にする。初期値:true
useTransform	CSS transformを有効（true）/無効（false）にする。初期値:true
variableWidth	スライド幅の変更を有効（true）/無効（false）にします。初期値:false
vertical	スライドが縦にスクロールするようにします（true）。初期値:false
verticalSwiping	縦のスワイプを有効（true）/無効（false）にします。初期値:false
rtl	スライドの方向を右から左に変更する（true）。初期値:false
waitForAnimate	スライドをスクロールする際のアニメーション中に次のスライドに進む要求を無視します（true）。初期値:true
zIndex	スライドのz-indexが設定できます。IE9以下の対応に役立ちます。初期値:1000

画像１枚を表示する

htmlの基本的な記述にscssとjQuery（Javascript）を追加します。

.slick {
　max-width: 600px; margin: 0 auto 50px;

 img　{
　 width: 100%;
 }
}

$(document).ready(function(){
  $('.slick').slick({
    autoplay: true, //自動再生
  });
});

複数の画像を表示する

htmlの基本的な記述にscssとjQuery（Javascript）の変更したものを記述します。

.slick {
　padding: 0;

 img {
   width: 100%;
 }

 div {
   margin: 0 5px;
 }

 .slick-next {
　 right: 17px;　z-index: 100;
 }

 .slick-prev {
　 left: 23px; z-index: 100;
 }
}

$(document).ready(function(){
  $('.slick').slick({
    autoplay: true, //自動再生
    infinite: true, //スライドのループ有効化
    dots: true, //ドットのナビゲーションを表示
    slidesToShow: 4, //表示するスライドの数
    slidesToScroll: 4, //スクロールで切り替わるスライドの数

    responsive: [{
      breakpoint: 768, //ブレークポイントが768px
      settings: {
        slidesToShow: 3, //表示するスライドの数
        slidesToScroll: 3, //スクロールで切り替わるスライドの数
      }
    }, {
      breakpoint: 375, //ブレークポイントが375px
      settings: {
        slidesToShow: 2, //表示するスライドの数
        slidesToScroll: 2, //スクロールで切り替わるスライドの数
      }
    }]
  });
});

画像の切り替え時にフェードする

htmlの基本的な記述にscssとjQuery（Javascript）の変更したものを記述します。

.slick {
　max-width: 600px; margin: 0 auto 50px; padding: 0; height: auto;
 
 img　{
　 width: 100%;
 }
}

$(document).ready(function(){
 $('.slick').slick({
  autoplay: true, //自動再生
  dots: true, //ドットのナビゲーションを表示
  infinite: true, //スライドのループ有効化
  speed: 1000, //切り替えのスピード（小さくすると速くなる）
  fade: true, //フェードの有効化
 });
});

オプションの「fade:true;」を使うことで画像が切り替わるときのアニメーションがフェードになります。

サムネイル（下に画像）をつける

htmlの基本的な記述に追加します。

<div class="slick-upper">
 <div><img src="https://images.unsplash.com/photo-1604065780813-1a33b65688fe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1333&q=80" ></div>
 <div><img src="https://images.unsplash.com/photo-1604065781162-602728f326a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1333&q=80" ></div>
 <div><img src="https://images.unsplash.com/photo-1522376382758-57cc8c505cdb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTgwfDB8MXxzZWFyY2h8NHx8V29ybGQlMjBIZXJpdGFnZSUyMFNpdGV8ZW58MHx8fHwxNjU2MjExNjYz&ixlib=rb-1.2.1&q=80&w=400" ></div>
 <div><img src="https://images.unsplash.com/photo-1599833975787-5c143f373c30?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTgwfDB8MXxzZWFyY2h8N3x8V29ybGQlMjBIZXJpdGFnZSUyMFNpdGV8ZW58MHx8fHwxNjU2MjExNjYz&ixlib=rb-1.2.1&q=80&w=400" ></div>
 <div><img src="https://images.unsplash.com/photo-1642864628335-0d48f61eccbb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTgwfDB8MXxzZWFyY2h8MzR8fFdvcmxkJTIwSGVyaXRhZ2UlMjBTaXRlfGVufDB8fHx8MTY1NjIxMTY2OA&ixlib=rb-1.2.1&q=80&w=400" ></div>
 <div><img src="https://images.unsplash.com/photo-1634324033315-68839fa5af16?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTgwfDB8MXxzZWFyY2h8Nzl8fFdvcmxkJTIwSGVyaXRhZ2UlMjBTaXRlfGVufDB8fHx8MTY1NjIxMTY4MQ&ixlib=rb-1.2.1&q=80&w=400" ></div>
 <div><img src="https://images.unsplash.com/photo-1551081857-d07794dea569?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTgwfDB8MXxzZWFyY2h8NzJ8fFdvcmxkJTIwSGVyaXRhZ2UlMjBTaXRlfGVufDB8fHx8MTY1NjIxMTY4MQ&ixlib=rb-1.2.1&q=80&w=400" ></div>
 <div><img src="https://images.unsplash.com/photo-1628488321763-eb2f79b7f3b5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTgwfDB8MXxzZWFyY2h8MTgyfHxXb3JsZCUyMEhlcml0YWdlJTIwU2l0ZXxlbnwwfHx8fDE2NTYyMTIyNzI&ixlib=rb-1.2.1&q=80&w=400" ></div>
</div>
<div class="slick-under">
 <div><img src="https://images.unsplash.com/photo-1604065780813-1a33b65688fe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1333&q=80" ></div>
 <div><img src="https://images.unsplash.com/photo-1604065781162-602728f326a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1333&q=80" ></div>
 <div><img src="https://images.unsplash.com/photo-1522376382758-57cc8c505cdb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTgwfDB8MXxzZWFyY2h8NHx8V29ybGQlMjBIZXJpdGFnZSUyMFNpdGV8ZW58MHx8fHwxNjU2MjExNjYz&ixlib=rb-1.2.1&q=80&w=400" ></div>
 <div><img src="https://images.unsplash.com/photo-1599833975787-5c143f373c30?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTgwfDB8MXxzZWFyY2h8N3x8V29ybGQlMjBIZXJpdGFnZSUyMFNpdGV8ZW58MHx8fHwxNjU2MjExNjYz&ixlib=rb-1.2.1&q=80&w=400" ></div>
 <div><img src="https://images.unsplash.com/photo-1642864628335-0d48f61eccbb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTgwfDB8MXxzZWFyY2h8MzR8fFdvcmxkJTIwSGVyaXRhZ2UlMjBTaXRlfGVufDB8fHx8MTY1NjIxMTY2OA&ixlib=rb-1.2.1&q=80&w=400" ></div>
 <div><img src="https://images.unsplash.com/photo-1634324033315-68839fa5af16?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTgwfDB8MXxzZWFyY2h8Nzl8fFdvcmxkJTIwSGVyaXRhZ2UlMjBTaXRlfGVufDB8fHx8MTY1NjIxMTY4MQ&ixlib=rb-1.2.1&q=80&w=400" ></div>
 <div><img src="https://images.unsplash.com/photo-1551081857-d07794dea569?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTgwfDB8MXxzZWFyY2h8NzJ8fFdvcmxkJTIwSGVyaXRhZ2UlMjBTaXRlfGVufDB8fHx8MTY1NjIxMTY4MQ&ixlib=rb-1.2.1&q=80&w=400" ></div>
 <div><img src="https://images.unsplash.com/photo-1628488321763-eb2f79b7f3b5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTgwfDB8MXxzZWFyY2h8MTgyfHxXb3JsZCUyMEhlcml0YWdlJTIwU2l0ZXxlbnwwfHx8fDE2NTYyMTIyNzI&ixlib=rb-1.2.1&q=80&w=400" ></div>
</div>

scssとjQuery（Javascript）を記述します。

.slick-upper {
 max-width: 700px;
 margin: 0 auto 5px;
 padding: 0;

 img {
   width: 100%;
 }
}

.slick-under {
 max-width: 700px;
 margin: 0 auto;

 li {
   margin: 5px;
 }

 .slick-next {
   right: 20px; z-index: 100;
 }

 .slick-prev {
   left: 15px; z-index: 100;
 }

 .slick-current {
   opacity: 0.5;
 }

 div {
   cursor: pointer;
 }
}

$(document).ready(function(){
  $('.slick-upper').slick({
    infinite: true, //スライドのループ有効化
    arrows: false, //矢印非表示
    fade: true, //フェードの有効化
    draggable: false //ドラッグ操作の無効化
  });
  $('.slick-under').slick({
    infinite: true, //スライドのループ有効化
    slidesToShow: 8, //表示するスライドの数
    focusOnSelect: true, //フォーカスの有効化
    asNavFor: '.thumbnail', //thumbnailクラスのナビゲーション
  });
});

メイン画像を表示するスライドとナビゲーションを表示するスライドの２種類を使ってサムネイル付のカルーセルができます。

サムネイルで選択されている画像の表示は「slick-current」クラスがつくことを利用してscssでopacityの設定をします。

両サイドに画像を表示する

htmlの基本的な記述にscssとjQuery（Javascript）の変更したものを記述します。

.slick {
  margin: 0 0 50px;

 img {
   width: 100%; height: auto;
 }

 .slick-next {
   right: 20px; z-index: 99;
 }

 .slick-prev {
   left: 15px; z-index: 100;
 }
}

$(document).ready(function(){
    $('.slick').slick({
        infinite: true, //スライドのループ有効化
        dots:true, //ドットのナビゲーションを表示
        centerMode: true, //要素を中央寄せ
        centerPadding:'10%', //両サイドの見えている部分のサイズ
        autoplay:true, //自動再生
    });
});

「centerMode:true」で中央寄せにして両サイドの画像が見えるようにしています。

縦に切り替わる

htmlの基本的な記述にscssとjQuery（Javascript）の変更したものを記述します。

.slick {
　max-width: 600px;
　margin: 20px auto;

　div {
   width: 100%;
   line-height: 200px;
   text-align: center;
  }

 img {
   width: 100%;
 }

 .slick-prev {
   left: calc(50% - 10px);
   top: 10%;
   transform: rotateZ(90deg);
 }

 .slick-next {
   right: calc(50% - 10px);
   top: 90%;
   transform: rotateZ(90deg);
 }
}

$(document).ready(function(){
  $('.slick').slick({
    autoplay: true, //自動再生
    vertical: true, //縦のスライドを有効化
  });
});

「vertical:true」を設定してスライドを縦にします。

そしてscssで前後の矢印が上下にくるように設定します。

まとめ

先ずは、コピペして見た目を確かめてください。

ライブラリは、基本的な記述をコピペして、そこからカスタマイズする方法が楽です。

こうしてコーデイングのスピードを短くする工夫をしていきましょう。

何度か練習しないとですが、試す価値はありますよ。

\ みんなのコーディングバイブル /

Slickの設定

CDNを使用する

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

htmlの基本的な記述

オプションの設定

画像１枚を表示する

複数の画像を表示する

画像の切り替え時にフェードする

サムネイル（下に画像）をつける

両サイドに画像を表示する

縦に切り替わる

まとめ