tiny-sliderを使用すればスライダー(カルーセル)は1分で作成可能

tiny-sliderとは

スライダー(カルーセル)を簡単に作成可能な軽量スクリプト。CDNからCSSとJavaScriptを読み込んでCSSでスタイルを整えたあと、JSでオプションを指定するだけだ。

JSファイルはカスタマイズする

tiny-sliderはJavaScriptでボタンなどをinsertAdjacentHTMLで挿入しているのだが、挿入後のHTML構造があまり良くないため、挿入箇所をカスタマイズしたものを使用したほうが使い勝手が良い。

tiny-slider用のJS(オプション)を指定する

tiny-sliderを動作させるにはtns関数を実行する必要がある。

今回は利用頻度の高い、1つの画像が左右のボタンを押すと切り替わるものをサンプルとして作成する。

まず、tiny-slider.jsを読み込んでいる箇所のあとに以下のJSを記述する。

(function() {
  tns({
    container: '.slider',
    items: 1,
    slideBy: 'page',
    nav: true,
    controlsText: ['＜', '＞'],
    autoplay: true,
    autoplayHoverPause: true,
    autoplayButtonOutput: false,
    lazyload: true,
    nested: 'inner'
  });
})();

これでtiny-slider自体は動作するが、見た目が悪いため別途CSSを指定する必要がある。

tiny-slider用のCSSを指定する

tiny-slider用のCSSはこのように指定する。

.tns-outer {
  width: 300px;
  margin: 0 auto;
}
.tns-inner {
  position: relative;
}
.tns-nav {
  text-align: center;
}
.tns-nav > [aria-controls] {
  width: 9px;
  height: 9px;
  margin: 0 5px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #dddddd;
}
.tns-nav > [aria-selected="true"] {
  background: #999999;
}
[data-controls="prev"],
[data-controls="next"] {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  padding: 0;
  border: none;
  border-radius: 50%;
  outline: none;
  opacity: 0.9;
  background: #cc0000;
  color: #ffffff;
  line-height: 30px;
  text-align: center;
}
[data-controls="prev"]:hover,
[data-controls="next"]:hover {
  background: #aa0000;
}
[data-controls="prev"] {
  left: 10px;
}
[data-controls="next"] {
  right: 10px;
}

上記CSSが指定されれば見た目がこのようになる。

tiny-slider.js (カスタマイズ版) サンプル

bxSliderは使用しないほうが良い

bxSliderを使用しているWebサイトをいまだに見かけるが、bxSliderはjQueryが必須でファイルを余分に読み込まなければならないため、すでにjQueryを読み込んでいる環境でなければ軽量なtiny-sliderを使用したほうが良いだろう。