スライダーSiemaが最高なのでお勧めしたい超軽量スライダーSiemaが最高なのでお勧めしたい2018-09-27TwitterFacebookはてブLINEスライダーと言えばslickやbxSliderが有名ですが、手軽に色々出来る反面、結構な重量感があります。そんな時にお勧めしたいのがSiema。Siema()だけ」と超シンプルになっており、動作が異常な程軽快になっています。slickとか使ってた人は驚くかも。デザインも基本的に「自分でcss書いてね」というスタンスなので、ある程度HTML・CSS・jsがわかっている人であれば、「これくらいシンプルな方がやりやすいんだよ」といった感想を持つこと間違いなしの作りになっています。使用方法も簡単なのですが、日本語で解説している記事が少ない&あまり具体的に書かれていないようなので、実戦的な使い方を解説してみます。Siemaの入手Siema公式サイトここで入手できます。zipファイルを解凍して、distディレクトリの中に入っているsiema.min.jsを設置すれば、Siemaが使える状態になります。公式サイトに全部書いてありますが、全部英語なので一応解説しておきます。Siemaでsiemaのオブジェクトを生成し、prev(前のスライドを表示)、next(次のスライドを表示)だけ設定しています。スライダーの基本的な生成はこれで完了です。Siemaのオプション設定とはいえ、基本的な使い方だけではほとんどの要件は満たせないかと思います。いうことで、オプションを付けます。{},});公式サイトのサンプル丸コピです。newの時に引数に連想配列を設定することで、様々なオプションを付けることが出来ます。selectorsiemaを利用する際のクラスの設定です。デフォルトはsiemaになっていますが、例えばsliderなどに変えることも可能です。クラスの名称が気になる場合、全部自作したと言い張りたい場合などに変更することになります。durationスライド時の速度をミリ秒で設定します。1000なら1秒かけてスライド、5000なら5秒かけてスライドになります。後述するautoplayを利用する時には、変更する機会が出来ると思います。easingtransitionの変化のタイミングなどを指定するtransition-timing-functionと一緒です。ease-inとかease-in-outとかを指定することで、スライド時に最初はゆっくりスライドして加速するとか、ゆっくり始まって速度が上がって、その後またゆっくり終わるとか、スライドに緩急をつけることが可能になります。細かく指定したい場合は、cubic-bezierを使うこともできます。CSS3リファレンスperPagesiemaで指定されている要素を何個づつ表示するかを数字で指定します。4枚の画像をsiemaのスライダー内に指定している場合、perPageを2にすれば、それが2枚づつ表示されることになります。startIndex何個目の要素からスタートするかを数字で指定します。perPageに2が設定されており、2個づつ要素が表示される状態になっていた場合でも、startIndexで指定するのは、あくまでも要素の何番目をTOPに持ってくるかになります。draggableドラッグでスライド可能にするか、スマホなどのスワイプでスライド可能にするかを指定します。基本的にはtrue(デフォルト)にしておくことをおすすめします。multipleDragドラッグでスライドさせた際に、複数の要素をまとめてスライドさせられるか、という意味だとは思いますが、falseにしても特に変化がないので謎です。公式サイトにもこれだけサンプルが存在しません。thresholdどのくらいスライドさせたら、次の要素に切り替わるかをpx数で指定します。要素のサイズより大きくすると、どれだけスライドさせても次の要素に切り替わらなくなります。loop最後の要素まで行った際に、次の要素を最初の要素としてループさせられるようにするかどうかを指定します。デフォルトがfalseになっているので、最近のUIで考えればtrueにしておくべきかと思います。rtl右にスライドさせるか、左にスライドさせるかを指定します。デフォルトのfalse状態だと、一番最初の要素が一番左の要素と定義されるため、要素を左にスライドさせることで、次の要素が出てくるという形になります。日本では左にスライドさせていくのが一般的ですが、国によっては逆が一般的になるということなのかもしれません。onInitinit処理です。ロード時に1回読み込まれる動作を追加することが出来ます。console.log(‘init処理です’)onChangeスライド時に走らせる処理を書きます。スライドするたびに読み込まれる動作を追加することが出来ます。console.log(‘onChange処理です’)Siemaでautoplayを実行するSiemaのオプションを見れば、結構色々なことが出来るというのはわかると思いますが、大事なものが抜けています。autoplayです。サイトを読み込んだら、自動でスライドが流れるというのは非常に一般的な仕様なので、要求される機会も多いでしょう。Siemaにはオプション機能としてのautoplay設定は存在しません。理由は実は簡単で、オプションにするほどのことでもなく、jsを1行追加すればautoplayは簡単に実装できるからです。5000);簡単ですね、setIntervalで5秒ごとにnextを実行しました。一応注意点として、これを実装するにあたっては、loopがtrueになっている必要があります。falseの状態だと、最後の要素まで行った段階で止まってしまうためです。いう素晴らしいスライダーです。実装方法も非常にシンプルで、最低限の知識があれば十分に実用出来るものになっています。知名度が無いので敬遠している人もいると思いますが、サイト閲覧者の立場として見ても、Siemaは明らかにUXを向上させるものだと思うので、もっと使う人が増えてくれればうれしいです。