スライドショー(jQueryスライダープラグイン slickを使ってみる)

JavaScript

画像スライダーの続き。今度はjQueryのスライダープラグインを使ってみる。何種類かあるみたいだが、一番人気そうなslickを使ってみよう。

slickのサイトからプラグインをダウンロードする。

slick - the last carousel you'll ever need

ファイルが増えてきたので、ここからはローカルのDIRを、CSSファイルは./css直下に、プラグインなどは./lib直下に整理していく（計画性が無いなー（泣））。 ダウンロードしたらプラグイン本体のslick.js(またはslick.min.js)と、CSSファイルのslick.cssとslick-theme.cssを配置して読み込む。

次にHTML側で読み込みたい画像のリストをdivタグとかリストタグで直に列挙していく。ここではULタグで並べた。UL>LIの内側のimgタグはリンクで囲っておく。

[sample04.html]

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample04</title>
  <link rel="stylesheet" href="./css/slick.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="./css/slick-theme.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="./css/sample04.css" type="text/css" media="screen" />
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="./lib/slick.js"></script>
  <script type="text/javascript" src="./sample04.js"></script>
</head>
<body>
  <div id="main">
    <ul class="slick-slider">
      <li class="slick-item">
        <a href="#"><img class="sample-img" src="images/001.jpg"></a>
      </li>
      <li class="slick-item">
        <a href="#"><img class="sample-img" src="images/002.jpg"></a>
      </li>
      <li class="slick-item">
        <a href="#"><img class="sample-img" src="images/003.jpg"></a>
      </li>
      <li class="slick-item">
        <a href="#"><img class="sample-img" src="images/004.jpg"></a>
      </li>
      <li class="slick-item">
        <a href="#"><img class="sample-img" src="images/005.jpg"></a>
      </li>
    </ul>
  </div>
</body>
</html>

単純で基礎的なスライダーだけなら、jsファイル側はいたって簡単で、これだけでできるの？って感じ。

[sample04.js]

$(function() {
  $('.slick-slider').slick({
    dots: true
  });
});

slick関数に渡すオブジェクトはオプションで、ここでは今読まれている画像の位置を表すドットを画像下に表示したいので、dots: trueを渡している。これを書かないとデフォルトでは表示されないようだ。

このままでもいいが、クリックする矢印の位置や色、ドットの位置や色を調整したいので以下のCSSを読み込んでいる。これがslick-theme.cssを上書きする形になる。

[sample04.css]

#main {
  width: 580px;
  height: auto;
}

.sample-img {
  width: 100%;
  height: auto;
}

.slick-slider {
  width: 100%;
  height: auto;
}

.slick-slide img {
  min-width: 100%;
  height: auto;
}

/* 左右の矢印の色を調整 */
.slick-prev:before,
.slick-next:before {
  color: #000;
}
/* 左右の矢印の位置を調整 */
.slick-next {
  right: -22px;
  z-index: 99;
}
.slick-prev {
  left: 18px;
  z-index: 100;
}
/* スライド数のドットの色をBlackに */
.slick-dots li.slick-active button:before,
.slick-dots li button:before {
  color: #000000;
}

/* ドットの位置調整(画像の真ん中に) */
.slick-dots {
  width: 94.8%;
}

(DEMO) sample04

画像の左右にある小さな矢印をクリックすることで、画像が切り替わる。特にこれ以上何もオプションを渡していないが、デフォルトで順序がループするようになっている。