今回はECサイトなどでよく見かける、複数商品を一気にスライドさせる方法を紹介します。
世の中には様々なスライダーのプラグインがありますが、今回はその中でも最も汎用性が高く、オプション設定も豊富な「slick(スリック)」を使って紹介します。
デモページ
言葉で説明するのは難しいので、まずはデモページを確認します。
slickの導入方法
まずは公式サイトからファイルをダウンロードします。
ファイルを開くと中にはいろいろありますが、使うファイルはこちらの3つ。
- 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> | 次への矢印ボタンのカスタマイズ |