Tiny sliderはVanilla JSを使った多彩なカスタマイズができるスライダーを実装することができます。カルーセル、ギャラリー、レスポンシブ対応、縦スライダーなど、多くの機能や特徴があるのでカスタマイズしたい人には最適です。
Tiny slider
以下、Tiny sliderの実際のデモページになります。
デモ
デモページには、Base、Non-loop、Rewind、Fixedwidth、Fixedwidth-edgepadding、Vertical、Responsive、Mouse-dragなど、ほかにもたくさんのサンプルが設置されています。
各サンプルにある「prev」と「next」ボタンをクリックすると、スライダーを前後に移動することができます。Mouse-drag、Mouse-drag2ではマウスによるドラッグ操作でもスライダーを切り替えることが可能です。
レスポンシブにも対応済みなので、いろんなデバイスでも閲覧・操作しやすい柔軟なスライダーを求めている人にはピッタリですね。
さらに、Tiny sliderには数多くのオプションも用意されています。container、mode、axis、items、gutter、edgePadding、fixedWidth、slideBy、controls、controlsText、controlsContainer、nav、navContainer、arrowKeys、speed、autoplay……など、まだまだたくさんのオプションがあります。
ナビゲーションの表示、キー操作、スピード、自動再生など、便利な機能をオプションから手軽に設定することが可能です。
また、オプションだけでなくカスタムイベントによるカスタマイズなんかもできます。
というわけで、Vanilla JSによるカスタマイズ性に優れたスライダー「Tiny slider」の紹介でした。
サポートされたブラウザは、Firefox 8+、Chrome 15+、Safari 4+、Opera 12.1+、IE 8+。ライセンスはMITになります。Tiny sliderの詳しい使い方、ダウンロードは以下のページからどうぞ。
