メインコンテンツへスキップ

カルーセルのサンプル

「HTML」「CSS」「JS」の各タブを押すとコードが記載されているので、それをコピーしてお使い下さい。

オプションの使用例

解説はこちら

interval(自動的に循環させる時間の間隔)

data-interval="5000"(=5秒)デフォルトで設定されているので、あえて設定する必要はない。
data-interval="1000"(=1秒)
data-interval="false"(自動的に循環しない)

keyboard(キーボード操作)

data-keyboard="true" デフォルトで設定されているので、あえて設定する必要はない。

【補足】キーボードのTabキーを押してカルーセルにフォーカスを合わせた状態で、キーボードの左右の矢印を押すと前後のカルーセルに移動(通常の自動循環は行う)。

data-keyboard="false"

【補足】キーボードのTabキーを押してカルーセルにフォーカスを合わせた状態で、キーボードの左右の矢印を押しても前後のカルーセルに移動しない(通常の自動循環は行う)。

pause(循環の一時停止)

●循環の開始/一時停止ボタンを設置

【補足】通常はカルーセルの上にカーソルを合わせると循環は一時停止されるが、上のカルーセルではそれを無効にし、一時停止ボタンを押さないと循環は一時停止しない。一時停止中のカルーセルを循環させるには再生ボタンを押す。

ride(自動循環)

data-ride="false" ページ読み込み後手動で再生開始すると自動循環 デフォルトで設定されているので、あえて設定する必要はない。
data-ride="carousel" ページ読み込み後自動循環開始

wrap(連続循環)

data-wrap="true" デフォルトで設定されているので、あえて設定する必要はない。
data-wrap="false"(1回だけ循環して止まる)