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

jqTreeJSONデータからツリー構造を作成できるjQueryプラグイン「jqTree」前のページ

HTMLフォームの検証を簡単に実装できる「JS Form Validator」次のページJS Form Validator

関連記事

  1. jQuery LED

    JavaScript

    LEDディスプレイのようなカウントダウン・タイマー・時計を実装できる「jQuery LED」

    jQuery LEDは、LEDディスプレイで表示されるようなカウントダ…

  2. Background Blur

    JavaScript

    画像をボカしてくれるクロスブラウザ対応の「Background Blur」

    Background Blurは画像をカッコよくボカしてくれるクロスブ…

  3. floatThead

    JavaScript

    テーブルのヘッダーを固定できるjQueryプラグイン「floatThead」

    floatTheadはテーブルのヘッダーを固定することができるjQue…

  4. Material Design Responsive Table
  5. MoveTo

    JavaScript

    軽量なスムーススクロールを実装できるJSライブラリ「MoveTo」

    MoveToは軽量(圧縮版で1KBほど)なスムーススクロールを実装する…

  6. popModal

    JavaScript

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

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

最近の記事

  1. EOS RP
  2. COMOLI シルクネルジャケット シルクネルドローストリングパンツ
  3. スターバックス ハシエンダ アルサシア
  4. イングリッシュマフィン

アーカイブ

PAGE TOP