ウェブアクセシビリティ支援
ウェブアクセシビリティに対応したスライダー・カルーセルUIです。
スライド、フェード、自動再生、ドラッグ操作、レスポンシブ、キーボード操作、スクリーンリーダーに対応しています。
デザインに合わせてカスタマイズが可能です。
スライダー全体の設定
スライダーの外枠にdata-carousel属性を追加します。
オプションを指定したい場合は、このdata-carousel属性を持つタグにオプションを追加します。
スライダーアイテムの設定
スライダーアイテム全体の外枠にdata-carousel-items属性を追加します。
個別アイテムの設定
各アイテムにdata-carousel-item-label=""属性を追加し、識別用のラベルを指定します。
前後のボタンの設定
次へ進むボタンにはdata-carousel-next属性を、前に戻るボタンにはdata-carousel-prev属性を追加します。
ドットインジケーターの設定
ドットインジケーターを設定する場合は空の要素にdata-carousel-indicator属性を追加します。
自動再生停止ボタンの設定
自動再生停止ボタンを設定する要素にはdata-carousel-play属性を追加します。
autoplay
説明: カルーセルが自動的にスライドするかどうかを指定します。
使用例: data-carousel-autoplay="true"
値: "true"または"false"
speed
説明: スライドのアニメーション速度をミリ秒で指定します。
使用例: data-carousel-speed="300"
値: ミリ秒単位の数値（例: 300は0.3秒）
dragging
説明: ドラッグ操作を有効にするかどうかを指定します。
使用例: data-carousel-dragging="true"
値: "true"または"false"
loop
説明: カルーセルのループ機能を有効にするかどうかを指定します。
使用例: data-carousel-loop="true"
値: "true"または"false"
clone
説明: クローン機能を有効にするかどうかを指定します。クローンはスライドのループをスムーズにするために使用されます。
使用例: data-carousel-clone="true"
値: "true"または"false"
cloneItem
説明: クローンするアイテムの数を指定します。cloneがtrueの場合に有効です。
使用例: data-carousel-clone-item="2"
値: 数値（例: 2は2つのアイテムをクローン）
minItem
説明: カルーセルを有効にするために必要な最小のアイテム数を指定します。
使用例: data-carousel-item-minimum="3"
値: 数値（例: 3は最低3つのアイテムが必要）
offset
説明: カルーセルアイテムのオフセットを指定します。
使用例: data-carousel-offset="2"
値: 数値（例: 2は要素を2つずらす）
offsetSP
説明: スマートフォン向けのカルーセルアイテムのオフセットを指定します。
使用例: data-carousel-offset-sp="2"
値: 数値（例: 2は要素を2つずらす）
offsetPC
説明: PC向けのカルーセルアイテムのオフセットを指定します。
使用例: data-carousel-offset-pc="2"
値: 数値（例: 2は要素を2つずらす）
offsetResponsive
説明: 画面サイズに応じたレスポンシブなカルーセルアイテムのオフセットを指定します。
使用例: data-carousel-offset-responsive="1160"
値: 数値（例: 1160は1160ピクセル以下の画面サイズでオフセットが適用）
visibleItem
説明: 表示されているエリアのカルーセルアイテムの個数を指定します。
使用例: data-carousel-visible-item="3"
値: 数値
visibleItemSP
説明: スマートフォン向けの表示されているエリアのカルーセルアイテムの個数を指定します
使用例: data-carousel-visible-item-sp="3"
値: 数値
visibleItemPC
説明: PC向けの表示されているエリアのカルーセルアイテムの個数を指定します
使用例: data-carousel-visible-item-pc="3"
値: 数値
[2024-06-28] 1.0.0
- NEW: 初期リリース
[2024-10-25] 1.1.0
- visibleItemを追加
