jQuery スライダープラグイン『slick』

はじめに

・今回の完成形

1.準備

1.公式サイトからファイルをダウンロードする。

2.『get it now』をクリックする。

3.『Download Now』をクリックする。

2.使用するファイル・フォルダの設置

1.ダウンロードしたファイルから『「fontsフォルダ」、「slick.css」、「slick.theme.css」、「slick.min.js」、「ajax-loader.gif」』を使用する。

2.それぞれのフォルダに移動させて、設置する。

　今回、自身は以下の様にしました。

<!-- index.html headタグ内 --> 

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

⚠️jQueryのバージョンに注意する。「対応していないこともあるため」

<!-- index.html bodyタグ下部 -->

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="slick/slick.min.js" ></script>

3.スライダーを作成

1.HTML内に記述

以下が基本的な構文です。

<!-- index.html  -->

<section class="regular slider" >
    <div>
        <a href="#"><img src="img/ex-1.jpg" alt="image01"></a>
    </div>
    <div>
        <a href="#"><img src="img/ex-2.jpg" alt="image02"></a>
    </div>
    <div>
        <a href="#"><img src="img/ex-3.jpg" alt="image03"></a>
    </div>
    <div>
        <a href="#"><img src="img/ex-4.jpg" alt="image04"></a>
    </div>
    <div>
        <a href="#"><img src="img/ex-5.jpg" alt="image05"></a>
    </div>
    <div>
        <a href="#"><img src="img/ex-6.jpg" alt="image06"></a>
    </div>
</section>

2.CSSを記述

/* style.css */

.slider {
   width: 90vw;
   height: 300px;
   margin: 100px auto;
}
.slick-slide {
 margin-left: 50px;
}
.slick-slide img {
 height: 300px;
 width: 300px;
}
.slick-prev:before,
.slick-next:before {
 color: black;
}
.slick-slide {
 transition: all ease-in-out .3s;
}
.slick-current {
 opacity: 1;
}

3.jsを記述

//script.js

// 基本的なスライダー
$(".regular").slick();

//script.js

//今回のスライダー
$(document).on('ready', function() {
 $(".regular").slick({
   dots: true,
   infinite: true,
   slidesToShow: 3,
   slidesToScroll: 3,
   arrows: true,
   autoplaySpeed: 0,
   draggable: true,
   initialSlide: 0,
   swipe: true,
 });
});

// DOM　(HTML)を読み込んでから『JavaScript、jQuery』の処理を行うことで正しく動作させる

$(document).ready(function(){
 //処理
});

//自身が使えそうと思ったオプション一覧

$(document).on('ready', function() {
 $(".regular").slick({
   dots: true,                 //下部のドットナビゲーション
   infinite: true,             //無限ループ
   slidesToShow: 3,            //一度に見せる枚数
   slidesToScroll: 3,          //スクロールしていく枚数
   arrows: true,               //左右のナビゲーション
   fade: true,                 //フェード、１枚のとき
   autoplay: true,             //オートプレイ
   pauseOnHover: true,         //自動再生マウスホバー時停止『スライドエリア』
   pauseOnDotsHover: true,     //自動再生マウスホバー時停止『ドットエリア』
   autoplaySpeed: 0,           //スピード
   cssEase: 'linear',          //css3アニメーション設定
   speed: 20000,               //自動スクロールのスピードの秒数
   draggable: true,            //ドラックスクロール
   initialSlide: 0,            //最初のスライダーの位置
   lazyLoad: 'progressive',    // 画像の遅延表示。‘ondemand’or'progressive'
   swipe: true,                //タッチスワイプ対応
   vertical: true,             //縦スライド
   centerMode: true,           //表示中の画像を中央へ
   centerPadding: '150px'      //中央のpadding
 });
});


//実際にはまだまだありますので気になる方は調べてください。

最後に

この様になれば完成です。

今回、実践した物は『GitHub』に自身の備忘録、復習用として載せていますので気になる方は見てみてください。