slickの導入とちょっとしたカスタマイズ

サイトの模写を進める中でスライドショーを実装する必要が出てきました。

そこで簡単にスライドショーを実現できるスライダープラグイン「slick」を導入し、少しカスタマイズを行なったのでやり方を紹介します。

導入方法
カスタマイズ方法

導入方法

以下のサイトを参考にすれば、問題なく導入できます。

webdesignday.jp

ちょっと紹介すると

公式サイトからファイルをダウンロード後、以下のファイルを該当フォルダに格納

ajax-loader.gif
fonts(フォルダ)
slick-theme.css
slick.css
slick.min.js

ファイルを読み込むためにheadに以下のように記述

<head>
    <meta charset="UTF-8">
    <title>copy1</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://use.fontawesome.com/releases/v5.10.1/css/all.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link href="slick/slick-theme.css" rel="stylesheet" type="text/css">
    <link href="slick/slick.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="slick/slick.min.js"></script>
    <script type="text/javascript" src="js/myjs.js"></script>
</head>

slickを動かすための記述だけ抽出すると

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link href="slick/slick-theme.css" rel="stylesheet" type="text/css">
    <link href="slick/slick.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="slick/slick.min.js"></script>
    <script type="text/javascript" src="js/myjs.js"></script>
</head>

となります。

そしてHTMLとmyjsに以下のように記述するとスライドショーが実装できます。

めっちゃ簡単です。

index.html

<ul class="slider">
    <li><a href="#"><img src="images/slick1.jpg" alt="image01"></a></li>
    <li><a href="#"><img src="images/slick2.jpg" alt="image02"></a></li>
    <li><a href="#"><img src="images/slick3.jpg" alt="image03"></a></li>
</ul>

myjs.js

$(function() {
  // スライドショー
  $('.slider').slick({
    autoplay:true,
    autoplaySpeed:2000,
    dots:true,
    fade:true,
  });
});

autoplay:trueで自動再生

autoplaySpeed:2000で2秒で切り替わります

dots:trueでスライドを切り替えるためのドットを表示させます

fade:trueで横からにゅっとスライドが現れるのではなく、ふわっと現れるようになります。

カスタマイズ方法

さらにdotsを文字列に変更して、かつホバーすれば該当のスライドに遷移するようにカスタマイズします。

style.css

    .slick-dots {
        bottom: 300px;
        right: -500px;
        li {
          padding: 0 10px;
          button {
            &:before {
              height: 160px;
              font-size: 20px;
            }
          }
          &:nth-child(1) {
            right: 0px;
          }
          &:nth-child(2) {
            right: 80px;
          }
          &:nth-child(3) {
            right: 160px;
          }
          button#slick-slide-control00 {
            &:before {
              content: 'お店の始まり';
            }
          }
          button#slick-slide-control01 {
            &:before {
              content: 'お店の危機';
            }
          }
          button#slick-slide-control02 {
            &:before {
              content: 'お店の発展';
            }
          }
        }
      }

少し説明します。

.slick-dots直下のbottomとrightでドットの表示位置（基準）を決定。

liのheightは表示させる文字列に合わせて長さを変えます。短すぎると折り返してしまいます。

nth-child()のrightで各スライドショーを表すドットの位置を基準値からどれだけずらすか決定しています。

button#slick-slide-controlの中のcontentで表示させる文字列を決定しています。

myjs.js

$(function() {
  // スライドショー
  $('.slider').slick({
    autoplay:true,
    autoplaySpeed:2000,
    dots:true,
    fade:true,
  });
  // dotにホバーするとスライドが切り替わる
  $( '.slider' ).on( 'mouseenter', '.slick-dots > li', function() {
    $( this ).click();
  });
});

少し説明します。

スライドショーを遷移させるドットの上にマウスをホバーするとクリックしたことにして、スライドを遷移させる処理を追加しています。

以上です。

[https://twitter.com/oyaoya1123/status/1236796441835630593:embed#✅模写の実施　header部分がひと通り完成　slick.jsを導入し、多少カスタマイズ　スライドインを勉強中✅記事執筆　テックキャンプの批評記事を執筆開始　前書きだけで1500文字になってしまった…… https://t.co/OHpajd5D5D]

迷い人

日々勉強。勉強の先に何か見つかるといいなぁ

slickの導入とちょっとしたカスタマイズ

導入方法

カスタマイズ方法