ドット付きカルーセル（左右矢印）
ドット付きカルーセルは、複数のスライドを1枚ずつ見せ、下のドットと左右の矢印で操作できる汎用スライダーです。スライドを横一列に flex で並べたトラックを、 transform:translateX で左へずらして表示枚を切り替えます。動きには transition のイージングが効いており、滑らかに流れます。
解説
ドット付きカルーセルは、複数のスライドを1枚ずつ見せ、下のドットと左右の矢印で操作できる汎用スライダーです。スライドを横一列に flex で並べたトラックを、transform:translateX で左へずらして表示枚を切り替えます。動きには transition のイージングが効いており、滑らかに流れます。JavaScript の go() 関数が現在位置を更新し、トラックの位置と現在のドットの強調を同時に切り替えます。setInterval による4秒ごとの自動再生も組み込まれています。
使う場面
- トップページのヒーローで複数のビジュアルを順番に見せたいとき
- お客様の声や実績を1件ずつ切り替えて表示したいとき
- 商品ギャラリーで写真をスライド表示したいとき
現在位置のドットは .is-on で横長の形に変わり、見ている枚が一目で分かります。矢印は端まで来ても %slides.length でループするため最初に戻ります。注意点として、自動再生はじっくり読みたい利用者の妨げになることがあるので、ホバー中は setInterval を一時停止すると親切です。ドットの色やスライドの角丸はブランドに合わせて調整できます。
よくある質問
自動再生を止めたり速さを変えたりできますか。
末尾の setInterval で 4000 ミリ秒ごとに次のスライドへ送る記述が自動再生です。この一行を削除すると自動再生が止まります。
スライドの枚数を増やすにはどうしますか。
cr__slide を必要な数だけ足し、同じ数だけ cr__dots の span を追加します。JavaScript はスライド数を自動で数えるため、HTML を増やすだけで矢印もドットも対応します。