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. JavaScript

    リスト化した要素を自分が指定した数に分割できるjQueryプラグイン「Easy List Split…

    リスト化した要素を自分が指定した数に分割できるシンプルだけど便利なjQ…

  2. infoBox

    JavaScript

    マウスオーバーでインフォメーションボックスを表示させる「infoBox」

    infoBoxはアイコンにマウスオーバーするとインフォメーションボック…

  3. HC Sticky

    JavaScript

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

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

  4. fullPage.js

    JavaScript

    フルページでコンテンツごとにスクロールする「fullPage.js」

    fullPage.jsはフルページでコンテンツごとにスクロールするレス…

  5. ptrLight

    JavaScript

    モバイル用のリフレッシュインジケーターを実装できる「ptrLight」

    ptrLightはモバイル用のリフレッシュインジケーターを実装すること…

  6. JavaScript

    カスタマイズも自由にできるjQuery「bxSlider」の使い方

    個人的にかなりよさげなjQueryスライダーを使ってみました。その名も…

最近の記事

  1. Anker PowerCore Lite 20000
  2. ネクスタイム
  3. フォールドオーバーポーチ
  4. 田沢湖
  5. ハクバ シリコンクロス

Instagram始めました

Facebookページ

アーカイブ

PAGE TOP