メディア・画像
カルーセル
横並びスライドを矢印・ドット・スワイプで切り替える。scroll-snap で滑らかに止まり、Pointer Events でタッチスワイプにも対応。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
コード（コピーして使えます）
<div class="cr-root">
<div class="cr-track" id="crTrack">
<!-- <img src="..." alt="..."> を .cr-slide に置き換えて使う -->
<div class="cr-slide" style="background:linear-gradient(135deg,#2b50c7 0%,#5a7bff 100%)">
<span class="cr-label">スライド 1</span>
</div>
<div class="cr-slide" style="background:linear-gradient(135deg,#e86c4d 0%,#f5a623 100%)">
<span class="cr-label">スライド 2</span>
</div>
<div class="cr-slide" style="background:linear-gradient(135deg,#2dc793 0%,#2b50c7 100%)">
<span class="cr-label">スライド 3</span>
</div>
<div class="cr-slide" style="background:linear-gradient(135deg,#9b59b6 0%,#e86c4d 100%)">
<span class="cr-label">スライド 4</span>
</div>
</div>
<button class="cr-btn cr-prev" id="crPrev" aria-label="前へ">‹</button>
<button class="cr-btn cr-next" id="crNext" aria-label="次へ">›</button>
<div class="cr-dots" id="crDots"></div>
</div>