slidr.js – 軽量、自由の高いスライダーライブラリ
スライドライブラリは色々な場面で活躍します。例えばWebサイトの最初に使う説明であったり、Eコマースでの商品画像を切り替える際にも役立ちます。さらにWebベースのプレゼンテーションスライドでも便利です。 そんな活躍の幅が広いスライドライブラリslidr.jsを紹介します。簡単に使えますのでアイディア次第で様々な使い道があるはずです。 使い方はまずHTMLを下記のように記述します。
<script type="text/javascript" src="/path/to/slidr.min.js"></script>
<ul id="slidr-ul" style="display: inline">
<li data-slidr="one">apple</li>
<li data-slidr="two">banana</li>
<li data-slidr="three">coconut</li>
</ul>
リストの他、画像やdivタグも使えます。
<!-- 画像の例 -->
<div id="slidr-img" style="display: inline-block">
<img data-slidr="one" src="/static/images/apple.png"/>
<img data-slidr="two" src="/static/images/banana.png"/>
<img data-slidr="three" src="/static/images/coconut.png"/>
</div>
<!-- divタグの例 -->
<div id="slidr-div" style="dislay: block">
<div data-slidr="one">apple</div>
<div data-slidr="two">banana</div>
<div data-slidr="three">coconut</div>
</div>
後はJavaScriptを実行するだけです。
slidr.create('slidr-ul').start();
これだけでスライダーが実現します。細かなオプションは次のようになります。
slidr.create('slidr-ul', {
breadcrumbs: true,
controls: 'corner',
direction: 'vertical',
fade: false,
overflow: true,
theme: '#222',
timing: { 'cube': '0.5s ease-in' },
transition: 'cube'
}).start();
実際に使った場合、次のようにスライドが切り替わります。
左右だけでなく上下にスライド切り替えもできます。
slidr.jsはスライドの幅が異なる場合、自動で調整してくれる機能があります。スライドに限らず、テキスト中の一部が切り替わって表示されるデモもありますので、こういった使い方もあるのかと感心することでしょう。
サイズは16KB以下で、ごくごく小さいライブラリとなっています。iOS 7のMobile Safariでも問題なく動作します。
使い道の多いライブラリだけに機能が多数あって、かつ自由度が高いのは大きな利点と言えそうです。slidr.jsの使い方を覚えてしまえば使える場面は多そうですね。