超軽量スライダーSiemaが最高なのでお勧めしたい

2018-09-27

スライダーと言えばslickやbxSliderが有名ですが、手軽に色々出来る反面、結構な重量感があります。

そんな時にお勧めしたいのがSiema。siema.min.jsの容量は13kbとかなり小さく、また、フリック対応でありながら、余計な機能がついていないため、基本の使い方は「jsを読み込んでnew Siema()だけ」と超シンプルになっており、動作が異常な程軽快になっています。slickとか使ってた人は驚くかも。

デザインも基本的に「自分でcss書いてね」というスタンスなので、ある程度HTML・CSS・jsがわかっている人であれば、「これくらいシンプルな方がやりやすいんだよ」といった感想を持つこと間違いなしの作りになっています。

使用方法も簡単なのですが、日本語で解説している記事が少ない＆あまり具体的に書かれていないようなので、実戦的な使い方を解説してみます。

Siemaの入手

Siema公式サイト

ここで入手できます。

zipファイルを解凍して、distディレクトリの中に入っているsiema.min.jsを設置すれば、Siemaが使える状態になります。

Siemaの基本的な使い方

公式サイトに全部書いてありますが、全部英語なので一応解説しておきます。

<script src="/siema_path/siema.min.js"></script>
<script>
  const mySiema = new Siema();
  document.querySelector('.prev').addEventListener('click', () => mySiema.prev());
  document.querySelector('.next').addEventListener('click', () => mySiema.next());
</script>

<div class="siema">
  <div><img src="slide1.jpg"></div>
  <div><img src="slide2.jpg"></div>
  <div><img src="slide3.jpg"></div>
  <div><img src="slide4.jpg"></div>
</div>

const mySiema = new Siema();

document.querySelector('.prev').addEventListener('click', () => mySiema.prev());

document.querySelector('.next').addEventListener('click', () => mySiema.next());

</script>

</div>

siema.min.jsを読み込んで、new Siemaでsiemaのオブジェクトを生成し、prev(前のスライドを表示)、next(次のスライドを表示)だけ設定しています。

スライダーの基本的な生成はこれで完了です。

Siemaのオプション設定

とはいえ、基本的な使い方だけではほとんどの要件は満たせないかと思います。ということで、オプションを付けます。

new Siema({
  selector: '.siema',
  duration: 200,
  easing: 'ease-out',
  perPage: 1,
  startIndex: 0,
  draggable: true,
  multipleDrag: true,
  threshold: 20,
  loop: false,
  rtl: false,
  onInit: () => {},
  onChange: () => {},
});

new Siema({

selector: '.siema',

duration: 200,

easing: 'ease-out',

perPage: 1,

startIndex: 0,

draggable: true,

multipleDrag: true,

threshold: 20,

loop: false,

rtl: false,

onInit: () => {},

onChange: () => {},

});

公式サイトのサンプル丸コピです。newの時に引数に連想配列を設定することで、様々なオプションを付けることが出来ます。

selector

siemaを利用する際のクラスの設定です。デフォルトはsiemaになっていますが、例えばsliderなどに変えることも可能です。クラスの名称が気になる場合、全部自作したと言い張りたい場合などに変更することになります。

duration

スライド時の速度をミリ秒で設定します。1000なら1秒かけてスライド、5000なら5秒かけてスライドになります。後述するautoplayを利用する時には、変更する機会が出来ると思います。

easing

transitionの変化のタイミングなどを指定するtransition-timing-functionと一緒です。ease-inとかease-in-outとかを指定することで、スライド時に最初はゆっくりスライドして加速するとか、ゆっくり始まって速度が上がって、その後またゆっくり終わるとか、スライドに緩急をつけることが可能になります。細かく指定したい場合は、cubic-bezierを使うこともできます。

transition-timing-function – CSS3リファレンス

perPage

siemaで指定されている要素を何個づつ表示するかを数字で指定します。例えば4枚の画像をsiemaのスライダー内に指定している場合、perPageを2にすれば、それが2枚づつ表示されることになります。

startIndex

何個目の要素からスタートするかを数字で指定します。perPageに2が設定されており、2個づつ要素が表示される状態になっていた場合でも、startIndexで指定するのは、あくまでも要素の何番目をTOPに持ってくるかになります。

draggable

ドラッグでスライド可能にするか、スマホなどのスワイプでスライド可能にするかを指定します。基本的にはtrue(デフォルト)にしておくことをおすすめします。

multipleDrag

ドラッグでスライドさせた際に、複数の要素をまとめてスライドさせられるか、という意味だとは思いますが、falseにしても特に変化がないので謎です。公式サイトにもこれだけサンプルが存在しません。

threshold

どのくらいスライドさせたら、次の要素に切り替わるかをpx数で指定します。要素のサイズより大きくすると、どれだけスライドさせても次の要素に切り替わらなくなります。

loop

最後の要素まで行った際に、次の要素を最初の要素としてループさせられるようにするかどうかを指定します。デフォルトがfalseになっているので、最近のUIで考えればtrueにしておくべきかと思います。

rtl

右にスライドさせるか、左にスライドさせるかを指定します。デフォルトのfalse状態だと、一番最初の要素が一番左の要素と定義されるため、要素を左にスライドさせることで、次の要素が出てくるという形になります。trueにすると逆。日本では左にスライドさせていくのが一般的ですが、国によっては逆が一般的になるということなのかもしれません。

onInit

init処理です。ロード時に1回読み込まれる動作を追加することが出来ます。
onInit: () => console.log(‘init処理です’)

onChange

スライド時に走らせる処理を書きます。スライドするたびに読み込まれる動作を追加することが出来ます。
onChange: () => console.log(‘onChange処理です’)

Siemaでautoplayを実行する

Siemaのオプションを見れば、結構色々なことが出来るというのはわかると思いますが、大事なものが抜けています。autoplayです。

サイトを読み込んだら、自動でスライドが流れるというのは非常に一般的な仕様なので、要求される機会も多いでしょう。しかし、Siemaにはオプション機能としてのautoplay設定は存在しません。

理由は実は簡単で、オプションにするほどのことでもなく、jsを1行追加すればautoplayは簡単に実装できるからです。

setInterval(() => mySiema.next(), 5000);

1	setInterval(() => mySiema.next(), 5000);

簡単ですね、setIntervalで5秒ごとにnextを実行しました。一応注意点として、これを実装するにあたっては、loopがtrueになっている必要があります。falseの状態だと、最後の要素まで行った段階で止まってしまうためです。

Siemaを使おう

Siemaは、最低限の機能が一揃い揃っていながら、超軽量、超高速動作という素晴らしいスライダーです。実装方法も非常にシンプルで、最低限の知識があれば十分に実用出来るものになっています。

あまり知名度が無いので敬遠している人もいると思いますが、サイト閲覧者の立場として見ても、Siemaは明らかにUXを向上させるものだと思うので、もっと使う人が増えてくれればうれしいです。

技術・知識