【slick】複数枚一気にスライドさせる方法

今回はECサイトなどでよく見かける、複数商品を一気にスライドさせる方法を紹介します。

世の中には様々なスライダーのプラグインがありますが、今回はその中でも最も汎用性が高く、オプション設定も豊富な「slick（スリック）」を使って紹介します。

デモページ

言葉で説明するのは難しいので、まずはデモページを確認します。

デモページ

slickの導入方法

まずは公式サイトからファイルをダウンロードします。

ファイルを開くと中にはいろいろありますが、使うファイルはこちらの３つ。

slick-theme.css
slick.css
slick.min.js

slickの読み込み

<link href="css/slick-theme.css" rel="stylesheet" type="text/css">
<link href="css/slick.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
<script type="text/javascript" src="js/slick.min.js"></script>

HTMLのhead部分にダウンロードしたファイルを読み込みます。

cssデータはcssファイルに、jsデータはjsファイルにデータを入れてください。

また、jsのライブラリの読み込みもお忘れなく。

HTML

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link href="css/slick-theme.css" rel="stylesheet" type="text/css">
    <link href="css/slick.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
    <script type="text/javascript" src="js/slick.min.js"></script>
    <title>スライダー練習</title>
  </head>
  <body>
    <ul class="slider">
      <li>
        <p>ランキング順位No.1</p>
        <img src="img/test.jpg" alt="">
        <h6>商品名商品名商品名</h6>
      </li>
      <li>
        <p>ランキング順位No.2</p>
        <img src="img/test.jpg" alt="">
        <h6>商品名商品名商品名</h6>
      </li>
      <li>
        <p>ランキング順位No.3</p>
        <img src="img/test.jpg" alt="">
        <h6>商品名商品名商品名</h6>
      </li>
      <li>
        <p>ランキング順位No.4</p>
        <img src="img/test.jpg" alt="">
        <h6>商品名商品名商品名</h6>
      </li>
      <li>
        <p>ランキング順位No.5</p>
        <img src="img/test.jpg" alt="">
        <h6>商品名商品名商品名</h6>
      </li>
      <li>
        <p>ランキング順位No.6</p>
        <img src="img/test.jpg" alt="">
        <h6>商品名商品名商品名</h6>
      </li>
      <li>
        <p>ランキング順位No.7</p>
        <img src="img/test.jpg" alt="">
        <h6>商品名商品名商品名</h6>
      </li>
      <li>
        <p>ランキング順位No.8</p>
        <img src="img/test.jpg" alt="">
        <h6>商品名商品名商品名</h6>
      </li>
      <li>
        <p>ランキング順位No.9</p>
        <img src="img/test.jpg" alt="">
        <h6>商品名商品名商品名</h6>
      </li>
      <li>
        <p>ランキング順位No.10</p>
        <img src="img/test.jpg" alt="">
        <h6>商品名商品名商品名</h6>
      </li>
    </ul>
　</body>
</html>

長々書いてありますが、<li></li>の中に自分のデザインをコーディングすればおっけーです。<ul>にsliderクラスをつけることを忘れないでください。

JavaScript

続いてJavaScript。

$('.slider').slick({
      autoplay:true,
      infinite: true,
      slidesToShow: 5,
      slidesToScroll: 5
    });

<ul>にsliderクラスを設置したと思いますが、それはここで使います。

autoplay:trueは自動でくるくるまわってくれるようにする記述、

infinite:trueは無限にループしてくれる設定、

slideToSho:5は表示するスライドの枚数、

slideToScroll:5はスクロールするスライドの数を表します。

これで複数枚一気にスライドすることができました。

デモページ

sliderのオプション

表示に関するオプション

項目	デフォルト	説明
arrows	true	左右矢印を表示する
dots	false	ドット（ページ送り）を表示する
slidesToShow	1	スライダーの表示数
slidesToScroll	1	一度にスライドする数
adaptiveHeight	false	trueの場合、高さ可変。faleseの場合、高さ固定
centerPadding	’50px’	センターモード時、見切れたコンテンツの幅をpx指定できる

動きに関するオプション

項目	デフォルト	説明
infinite	true	無限にスライドする
fade	false	trueの場合、スライド切り替え時にフェードインアウトする
speed	300	フェードのスピード
autoplay	false	trueの場合、自動再生する
autoplaySpeed	3000	自動再生時のスライド切り替えのスピード
vertical	false	縦方向にスライドする

「前へ」「次へ」の表示オプション

項目	デフォルト	説明
prevArrow	<button type=”button” class=”slick-prev”>Previous</button>	前への矢印ボタンのカスタマイズ
nextArrow	<button type=”button” class=”slick-next”>Next</button>	次への矢印ボタンのカスタマイズ