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. SPOILER ALERT!

    JavaScript

    画像やテキストにボカシを入れることができるjQueryプラグイン「SPOILER ALERT!」

    画像やテキストといった部分にボカシを入れることができるjQueryプラ…

  2. no-image

    JavaScript

    ミニマルでダイナミックなLightboxプラグイン「darkbox.js」

    darkbox.jsはミニマルながらもダイナミックなLightbox風…

  3. jQuery PieTimer

    JavaScript

    時間の経過とともに円形が欠けていくタイマー「jQuery PieTimer」

    jQuery PieTimerは時間の経過とともに円形のデザインが欠け…

  4. Horizontal Timeline

    JavaScript

    水平方向のタイムラインを実装できる「Horizontal Timeline」

    Horizontal Timelineは水平方向に移動可能なタイムライ…

  5. jQuery Gridly

    JavaScript

    クリックしてその場で拡大したりドラッグで配置を入れ替えたりできるプラグイン「jQuery Gridl…

    おもしろいjQueryプラグインがあったのでご紹介します。クリックして…

  6. Unite Gallery

    JavaScript

    レスポンシブな画像・動画ギャラリーを実装できる「Unite Gallery」

    Unite Galleryは、レスポンシブに対応した画像・動画ギャラリ…

最近の記事

  1. ユニクロ エアリズム マイクロメッシュVネックT(半袖)
  2. ライオン システマ 超コンパクト ふつう
  3. タリーズ ハムチーズ&サラダサンド
  4. クリニカのY字タイプのフロス
  5. 日和山公園の桜

アーカイブ

PAGE TOP