Vanilla JSを使った多彩なカスタマイズができるスライダー実装「Tiny slider」

Tiny slider

Tiny sliderはVanilla JSを使った多彩なカスタマイズができるスライダーを実装することができます。カルーセル、ギャラリー、レスポンシブ対応、縦スライダーなど、多くの機能や特徴があるのでカスタマイズしたい人には最適です。

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」の紹介でした。

Tiny slider

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

Archives