no-image

JavaScript

アクセシブルなカルーセルシステムを実装できる「jQuery Accessible Carrousel using ARIA」

jQuery Accessible Carrousel using ARIAは、ARIAを使ったアクセシブルなカルーセルシステムを実装することができるjQueryプラグインです。divやhxによるリストを簡単にカルーセル化できるほか、ファイル容量も通常版で25kb、圧縮版で8kbと、とても軽量に仕上がっているのがいいですね。

セッティングには属性を指定

デモ

デモではカルーセルの両端に前後移動できる矢印ボタンが設置されているほか、下部にはドットによるナビゲーションも備えています。矢印ボタン、またはナビゲーションをクリックすると、スライドしながらコンテンツが切り替わる仕組みです。

シンプルで動作もサクサクしているので、ストレスなくコンテンツを切り替えられますね。

アニメーションはスライドの他にもフェードに設定することも可能です。セッティングに関してはHTMLタグに属性を指定することで、いろいろな設定ができます。data-carrousel-○○といった属性がいろいろ用意されています。例えば、先ほどのアニメーションをフェードにしたい場合は、「data-carrousel-transition=”fade”」という属性を追加してあげます。

jQuery Accessible Carrousel using ARIA

関連記事

  1. Responsive Nav

    JavaScript

    レスポンシブ対応の軽量なナビゲーションを実装できる「Responsive Nav」

    レスポンシブ対応のナビゲーションを実装できる「Responsive N…

  2. justContext.js

    JavaScript

    シンプルなコンテキストメニューを実装できる「justContext.js」

    justContext.jsはjQueryなどを必要とせずに(ピュア …

  3. P-Loading

    JavaScript

    パワフルなローディングマスクを実装できるjQueryプラグイン「P-Loading」

    P-Loadingは、パワフルなローディングマスクを手軽に実装すること…

  4. DarkTooltip

    JavaScript

    色んなパターンのツールチップを実装できるjQueryプラグイン「DarkTooltip」

    DarkTooltipというjQueryプラグインを使えば、色んなパタ…

  5. FSVS(Full Screen Vertical Scroller)
  6. Lobibox

    JavaScript

    レスポンシブなメッセージを通知できる「Lobibox」

    Lobiboxはレスポンシブなメッセージボックスを通知できるjQuer…

最近の記事

  1. s9+
  2. SRS-LSR200
  3. QC30
  4. リンツ リンドール

アーカイブ

PAGE TOP