カルーセル Carousel
画像やコンテンツを横スライドで順番に表示する。ヒーローセクションや商品一覧で使用。
ライブデモ
ソースコード
<div class="demo-carousel">
<div class="demo-carousel-track">
<div class="demo-carousel-slide active" style="background:color-mix(in srgb, var(--ui-primary) 10%, #f9fafb);">
<h3 style="color:var(--ui-primary);">スライド 1</h3>
<p>最初のスライドのコンテンツです。</p>
</div>
<div class="demo-carousel-slide" style="background:color-mix(in srgb, var(--ui-primary) 20%, #f9fafb);">
<h3 style="color:var(--ui-primary);">スライド 2</h3>
<p>2番目のスライドのコンテンツです。</p>
</div>
<div class="demo-carousel-slide" style="background:color-mix(in srgb, var(--ui-primary) 30%, #f9fafb);">
<h3 style="color:var(--ui-primary);">スライド 3</h3>
<p>3番目のスライドのコンテンツです。</p>
</div>
</div>
<button class="demo-carousel-prev" aria-label="前へ">‹</button>
<button class="demo-carousel-next" aria-label="次へ">›</button>
<div class="demo-carousel-dots">
<button class="demo-carousel-dot active" aria-label="スライド1"></button>
<button class="demo-carousel-dot" aria-label="スライド2"></button>
<button class="demo-carousel-dot" aria-label="スライド3"></button>
</div>
</div>.demo-carousel {
position: relative; max-width: 480px; border-radius: 12px;
overflow: hidden; border: 1px solid #e5e7eb;
}
.demo-carousel-track { position: relative; height: 180px; }
.demo-carousel-slide {
position: absolute; inset: 0; display: flex;
flex-direction: column; align-items: center; justify-content: center;
opacity: 0; transition: opacity 0.5s;
}
.demo-carousel-slide.active { opacity: 1; }
.demo-carousel-slide h3 { margin: 0 0 6px; font-size: 18px; }
.demo-carousel-slide p { margin: 0; font-size: 13px; color: #666; }
.demo-carousel-prev, .demo-carousel-next {
position: absolute; top: 50%; transform: translateY(-60%);
width: 32px; height: 32px; border-radius: 50%;
background: rgba(255,255,255,0.9); border: 1px solid #e5e7eb;
font-size: 20px; cursor: pointer; color: var(--ui-primary);
display: flex; align-items: center; justify-content: center;
transition: background 0.2s;
}
.demo-carousel-prev:hover, .demo-carousel-next:hover {
background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.demo-carousel-prev { left: 10px; }
.demo-carousel-next { right: 10px; }
.demo-carousel-dots {
display: flex; justify-content: center; gap: 8px; padding: 12px;
}
.demo-carousel-dot { width: 10px; height: 10px; border-radius: 50%; background: #d1d5db; border: none; cursor: pointer; transition: background 0.2s, transform 0.2s; padding: 0; flex-shrink: 0; aspect-ratio: 1; }
.demo-carousel-dot.active { background: var(--ui-primary); transform: scale(1.3); }(function(){
const slides = document.querySelectorAll('.demo-carousel-slide');
const dots = document.querySelectorAll('.demo-carousel-dot');
let current = 0;
function goTo(index) {
slides[current].classList.remove('active');
dots[current].classList.remove('active');
current = (index + slides.length) % slides.length;
slides[current].classList.add('active');
dots[current].classList.add('active');
}
document.querySelector('.demo-carousel-prev').addEventListener('click', () => goTo(current - 1));
document.querySelector('.demo-carousel-next').addEventListener('click', () => goTo(current + 1));
dots.forEach((dot, i) => dot.addEventListener('click', () => goTo(i)));
setInterval(() => goTo(current + 1), 4000);
})();AIプロンプト
Basic
カルーセルをHTML/CSS/JSで作ってください。画像やコンテンツを横スライドで切り替えるUIです。
Custom
以下の仕様でカルーセルを実装してください。 - フェードトランジション - プライマリカラー: #2563eb - 前/次の矢印ボタン - ドット型インジケーター - 自動スライド（4秒間隔） - ホバー時に自動スライド停止 - スワイプ対応（タッチデバイス）
Advanced
高機能カルーセルを実装してください。 - タッチ/マウスのスワイプ操作 - 無限ループスクロール - レスポンシブ（スライド数の自動調整） - role="region" + aria-roledescription="カルーセル" - aria-label でスライド番号を読み上げ - キーボード操作（左右キー、Tab） - 自動再生の一時停止ボタン - prefers-reduced-motion で自動再生無効化 - 遅延読み込み（Intersection Observer） - CSS scroll-snap ベースの実装