カルーセルのサンプル
「HTML」「CSS」「JS」の各タブを押すとコードが記載されているので、それをコピーしてお使い下さい。
オプションの使用例
解説はこちら。
interval(自動的に循環させる時間の間隔)
●data-interval="5000"
(=5秒)デフォルトで設定されているので、あえて設定する必要はない。
See the Pen Bootstrap4のカルーセルのdata-interval="5000"の使用例 by cccabinet (@cccabinet) on CodePen.
●data-interval="1000"
(=1秒)
See the Pen Bootstrap4のカルーセルのdata-interval="1000"の使用例 by cccabinet (@cccabinet) on CodePen.
●data-interval="false"
(自動的に循環しない)
See the Pen Bootstrap4のカルーセルのdata-interval="false"の使用例 by cccabinet (@cccabinet) on CodePen.
keyboard(キーボード操作)
●data-keyboard="true"
デフォルトで設定されているので、あえて設定する必要はない。
See the Pen Bootstrap4のカルーセルのdata-keyboard="true"の使用例 by cccabinet (@cccabinet) on CodePen.
【補足】キーボードのTabキーを押してカルーセルにフォーカスを合わせた状態で、キーボードの左右の矢印を押すと前後のカルーセルに移動(通常の自動循環は行う)。
●data-keyboard="false"
See the Pen Bootstrap4のカルーセルのdata-keyboard="false"の使用例 by cccabinet (@cccabinet) on CodePen.
【補足】キーボードのTabキーを押してカルーセルにフォーカスを合わせた状態で、キーボードの左右の矢印を押しても前後のカルーセルに移動しない(通常の自動循環は行う)。
pause(循環の一時停止)
●循環の開始/一時停止ボタンを設置
See the Pen Bootstrap4のカルーセルの循環の開始/一時停止ボタンを設置 by cccabinet (@cccabinet) on CodePen.
【補足】通常はカルーセルの上にカーソルを合わせると循環は一時停止されるが、上のカルーセルではそれを無効にし、一時停止ボタンを押さないと循環は一時停止しない。一時停止中のカルーセルを循環させるには再生ボタンを押す。
ride(自動循環)
●data-ride="false"
ページ読み込み後手動で再生開始すると自動循環 デフォルトで設定されているので、あえて設定する必要はない。
See the Pen Bootstrap4のカルーセルのdata-ride="false"の使用例 by cccabinet (@cccabinet) on CodePen.
●data-ride="carousel"
ページ読み込み後自動循環開始
See the Pen Bootstrap4のカルーセルのdata-ride="carousel"の使用例 by cccabinet (@cccabinet) on CodePen.
wrap(連続循環)
●data-wrap="true"
デフォルトで設定されているので、あえて設定する必要はない。
See the Pen Bootstrap4のカルーセルのdata-wrap="true"の使用例 by cccabinet (@cccabinet) on CodePen.
●data-wrap="false"
(1回だけ循環して止まる)
See the Pen Bootstrap4のカルーセルのdata-wrap="false"の使用例 by cccabinet (@cccabinet) on CodePen.