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. no-image

    JavaScript

    縦スクロールによるフォトギャラリー実装「Simple Scroll Gallery」

    Simple Scroll Galleryは縦スクロールによるかっこい…

  2. JavaScript

    レスポンシブなLightbox風のギャラリーを実装できるjQueryプラグイン「anoFlow」

    anoFlowというjQueryプラグインを使えば、レスポンシブなLi…

  3. ItemSlide.js

    JavaScript

    タッチやスワイプでスライドするカルーセルのjQueryプラグイン「ItemSlide.js」

    ItemSlide.jsはタッチ、スワイプ、スクロールなどでスライドす…

  4. Flipster

    JavaScript

    レスポンシブ対応のシンプルなカルーセルを実装できるjQueryプラグイン「Flipster」

    レスポンシブにも対応しているシンプルなカルーセルを実装できるjQuer…

  5. JavaScript

    テキストに炎のようなエフェクトを追加してくれるjQueryプラグイン「jQuery Burn」

    テキストに炎のようなエフェクトを追加してくれるjQueryプラグイン「…

  6. Micromodal.js

    JavaScript

    アクセシブルで軽量なモーダルダイアログを実装できる「Micromodal.js」

    Micromodal.jsは、アクセシブルでファイル容量も軽量なモーダ…

最近の記事

  1. Waterlogue
  2. macOS Mojaveのダークモード
  3. Olli
  4. 単語帳メーカー(Flashcard Maker App)

Facebookページ

PAGE TOP