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. infiniteSlider2.js
  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryの超基本的なアニメーションを試してみる

    jQueryの基本的なアニメーションを試してみました。やっぱりアニメー…

  3. HC Sticky

    JavaScript

    スクロールしても要素を固定できるJSライブラリ「HC Sticky」

    HC Stickyはスクロールした時に特定の要素を固定したまま表示でき…

  4. ScalableLightbox

    JavaScript

    ミニマルでレスポンシブに対応したLightbox風のjQueryプラグイン「ScalableLigh…

    ScalableLightboxはミニマルなデザインでレスポンシブに対…

  5. LoadGo

    JavaScript

    画像をプログレスバー(ローディング)にできるjQueryプラグイン「LoadGo」

    LoadGoはサイト内にあるロゴなどといった画像をプログレスバー(ロー…

  6. Easy Z modal

    JavaScript

    シンプルなモーダルウィンドウ・ダイアログボックスを表示できる「Easy Z modal」

    Easy Z modalはシンプルでダイナミックなモーダルウィンドウ・…

最近の記事

  1. 田沢湖
  2. ハクバ シリコンクロス
  3. トライポッドスリーブ
  4. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ

Instagram始めました

Facebookページ

PAGE TOP