ウェブアクセシビリティに対応した スライダー・カルーセルUI

---

サンプル

---

---

説明

ウェブアクセシビリティに対応したスライダー・カルーセル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ピクセル以下の画面サイズでオフセットが適用）

変更履歴

[2024-06-28] 1.0.0
-NEW: 初期リリース

---