Tiny slider

JavaScript

Vanilla JSを使った多彩なカスタマイズができるスライダー実装「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

関連記事

  1. jquery-confirm

    JavaScript

    アラートやダイアログなどさまざまな機能を実装できる「jquery-confirm」

    jquery-confirmはアラートやconfirm、ダイアログなど…

  2. popModal

    JavaScript

    6種類のモーダルウィンドウを実装できる「popModal」

    popModalは6種類のモーダルウィンドウを実装することができるjQ…

  3. JavaScript

    チルトシフト効果でミニチュア風の写真に仕上げてくれるjQueryプラグイン「tiltShift.js…

    指定した画像にチルトシフト効果をプラスしてミニチュア風にしてくれるjQ…

  4. Guardian

    JavaScript

    フォームにバリデーションを実装できるjQueryプラグイン「Guardian」

    Guardianはフォームにバリデーション機能を実装することができるj…

  5. Smooth Scroll behavior polyfill
  6. Zoom SlideShow

    JavaScript

    カルーセルのスライドショーとズーム機能を備えた「Zoom SlideShow」

    Zoom SlideShowは、カルーセルによるスライドショーとズーム…

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP