メインコンテンツへスキップ
Frutjam logo Frutjam
v2.2.5
Theme

カルーセルコンポーネント

最終更新日:

スクロールスナップを使用した CSS のみの Tailwind CSS カルーセル。ナビゲーション コントロールを備えた水平スライド レイアウト。JavaScript は必要ありません。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

カルーセル コンポーネントは、回転またはスクロール可能なコンテナに複数のアイテムを表示し、画像、紹介文、製品ギャラリー、または注目のコンテンツを紹介するのに最適です。セマンティック HTML とスムーズなスクロール動作で構築されたカルーセルは、スナップ位置合わせによる水平および垂直レイアウトをサポートします。 Frutjam カルーセル システムは、ヒーロー セクション、製品ギャラリー、紹介の表示、コンテンツ スライダーに最適です。

CSS のみ。JavaScript は必要ありません。 WCAG AA にアクセス可能で、フレームワークに依存しない - Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

クラス タイプ 説明
carouselベーススナップ動作を備えた水平スクロール可能なコンテナ
carousel-item修飾子カルーセル内の個別のスライド
carousel-vertical修飾子縦スクロール方向
carousel-center修飾子各アイテムの中心にスナップ配置
carousel-end修飾子各アイテムの端にスナップ位置を合わせます

基本的な使い方

スクロール可能な項目を含む単純な水平カルーセルを作成します。

Featured
Popular
Trending
New
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<div class="carousel w-full gap-4 p-4 bg-base-100">
  <div class="carousel-item w-96">
    <div class="badge badge-primary">Featured</div>
  </div>
  <div class="carousel-item w-96">
    <div class="badge badge-secondary">Popular</div>
  </div>
  <div class="carousel-item w-96">
    <div class="badge badge-accent">Trending</div>
  </div>
  <div class="carousel-item w-96">
    <div class="badge badge-info">New</div>
  </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<div className="carousel w-full gap-4 p-4 bg-base-100">
  <div className="carousel-item w-96">
    <div className="badge badge-primary">Featured</div>
  </div>
  <div className="carousel-item w-96">
    <div className="badge badge-secondary">Popular</div>
  </div>
  <div className="carousel-item w-96">
    <div className="badge badge-accent">Trending</div>
  </div>
  <div className="carousel-item w-96">
    <div className="badge badge-info">New</div>
  </div>
</div>

画像付きカルーセル

スムーズなスクロールと応答性の高いサイズ設定で画像ギャラリーを表示します。

Image 1
Image 2
Image 3
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<div class="carousel w-full gap-2">
  <div class="carousel-item w-full">
    <picture>
      <source media="(max-width: 640px)" srcset="https://cdn.frutjam.com/images/photo-2.jpg?format=webp&width=640&height=360">
      <img src="https://cdn.frutjam.com/images/photo-2.jpg?format=webp&width=800&height=450" alt="Image 1" class="w-full" loading="lazy" />
    </picture>
  </div>
  <div class="carousel-item w-full">
    <picture>
      <source media="(max-width: 640px)" srcset="https://cdn.frutjam.com/images/photo-3.jpg?format=webp&width=640&height=360">
      <img src="https://cdn.frutjam.com/images/photo-3.jpg?format=webp&width=800&height=450" alt="Image 2" class="w-full" loading="lazy" />
    </picture>
  </div>
  <div class="carousel-item w-full">
    <picture>
      <source media="(max-width: 640px)" srcset="https://cdn.frutjam.com/images/photo-4.jpg?format=webp&width=640&height=360">
      <img src="https://cdn.frutjam.com/images/photo-4.jpg?format=webp&width=800&height=450" alt="Image 3" class="w-full" loading="lazy" />
    </picture>
  </div>
</div>

カルーセルの中央揃え

カルーセル項目を中央のスナップ位置とカード間の間隔で表示します。

Card 1

Featured product or content

Card 2

Popular selection

Card 3

Trending now

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="carousel carousel-center gap-4 p-4 bg-base-200 rounded-lg">
  <div class="carousel-item">
    <div class="card card-primary w-80">
      <div class="card-content">
        <h2 class="card-title">Card 1</h2>
        <p>Featured product or content</p>
      </div>
    </div>
  </div>
  <div class="carousel-item">
    <div class="card card-secondary w-80">
      <div class="card-content">
        <h2 class="card-title">Card 2</h2>
        <p>Popular selection</p>
      </div>
    </div>
  </div>
  <div class="carousel-item">
    <div class="card card-accent w-80">
      <div class="card-content">
        <h2 class="card-title">Card 3</h2>
        <p>Trending now</p>
      </div>
    </div>
  </div>
</div>

カルーセル垂直

項目を上から下にスクロールするための垂直カルーセルを作成します。

Item 1
Item 2
Item 3
Item 4
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<div class="carousel carousel-vertical h-96 gap-2 p-2 bg-base-100">
  <div class="carousel-item h-32">
    <div class="badge badge-lg badge-primary">Item 1</div>
  </div>
  <div class="carousel-item h-32">
    <div class="badge badge-lg badge-secondary">Item 2</div>
  </div>
  <div class="carousel-item h-32">
    <div class="badge badge-lg badge-accent">Item 3</div>
  </div>
  <div class="carousel-item h-32">
    <div class="badge badge-lg badge-info">Item 4</div>
  </div>
</div>

ナビゲーション付きカルーセル

アンカー リンクを使用してカルーセル項目間を手動でナビゲーションするためのボタンを追加します。

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div class="carousel w-full">
  <div id="slide1" class="carousel-item relative w-full">
    <div class="badge badge-primary w-full h-32">Slide 1</div>
    <div class="absolute inset-x-0 top-1/2 flex justify-between px-2">
      <a href="#slide4" class="btn btn-circle btn-sm btn-ghost" aria-label="Previous slide">❮</a>
      <a href="#slide2" class="btn btn-circle btn-sm btn-ghost" aria-label="Next slide">❯</a>
    </div>
  </div>
  <div id="slide2" class="carousel-item relative w-full">
    <div class="badge badge-secondary w-full h-32">Slide 2</div>
    <div class="absolute inset-x-0 top-1/2 flex justify-between px-2">
      <a href="#slide1" class="btn btn-circle btn-sm btn-ghost" aria-label="Previous slide">❮</a>
      <a href="#slide3" class="btn btn-circle btn-sm btn-ghost" aria-label="Next slide">❯</a>
    </div>
  </div>
  <div id="slide3" class="carousel-item relative w-full">
    <div class="badge badge-accent w-full h-32">Slide 3</div>
    <div class="absolute inset-x-0 top-1/2 flex justify-between px-2">
      <a href="#slide2" class="btn btn-circle btn-sm btn-ghost" aria-label="Previous slide">❮</a>
      <a href="#slide4" class="btn btn-circle btn-sm btn-ghost" aria-label="Next slide">❯</a>
    </div>
  </div>
  <div id="slide4" class="carousel-item relative w-full">
    <div class="badge badge-info w-full h-32">Slide 4</div>
    <div class="absolute inset-x-0 top-1/2 flex justify-between px-2">
      <a href="#slide3" class="btn btn-circle btn-sm" aria-label="Previous slide">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>
      </a>
      <a href="#slide1" class="btn btn-circle btn-sm" aria-label="Next slide">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
      </a>
    </div>
  </div>
</div>

ドットインジケーター付きカルーセル

小さなバッジ ボタンを複数のカルーセル項目のナビゲーション インジケーターとして使用します。

1 2 3 4
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<div class="carousel w-full">
  <div id="item1" class="carousel-item w-full">
    <div class="badge badge-primary w-full h-32">1</div>
  </div>
  <div id="item2" class="carousel-item w-full">
    <div class="badge badge-secondary w-full h-32">2</div>
  </div>
  <div id="item3" class="carousel-item w-full">
    <div class="badge badge-accent w-full h-32">3</div>
  </div>
  <div id="item4" class="carousel-item w-full">
    <div class="badge badge-info w-full h-32">4</div>
  </div>
  <div class="flex justify-center gap-2 pt-4">
    <a href="#item1" class="btn btn-xs btn-outline">1</a>
    <a href="#item2" class="btn btn-xs btn-outline">2</a>
    <a href="#item3" class="btn btn-xs btn-outline">3</a>
    <a href="#item4" class="btn btn-xs btn-outline">4</a>
  </div>
</div>

JS と React ヘルパー

frutjam/js の createCarousel または frutjam/r​​eact の useCarousel を使用して、プログラムでスライドを移動します。prefers-reduced-motion が自動的に尊重されます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div class="flex gap-2 mb-3">
  <button class="btn btn-sm" id="carousel-prev">← Prev</button>
  <button class="btn btn-sm" id="carousel-next">Next →</button>
</div>
<div class="carousel w-full" id="js-carousel">
  <div class="carousel-item w-full"><div class="badge badge-primary w-full h-32">Slide 1</div></div>
  <div class="carousel-item w-full"><div class="badge badge-secondary w-full h-32">Slide 2</div></div>
  <div class="carousel-item w-full"><div class="badge badge-accent w-full h-32">Slide 3</div></div>
</div>
<script type="module">
  import { createCarousel } from 'frutjam/js'
  const carousel = createCarousel(document.getElementById('js-carousel'))
  document.getElementById('carousel-prev').onclick = () => carousel.prev()
  document.getElementById('carousel-next').onclick = () => carousel.next()
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import { useCarousel } from 'frutjam/react'

export default function CarouselDemo() {
  const carousel = useCarousel()
  return (
    <>
      <div className="flex gap-2 mb-3">
        <button className="btn btn-sm" onClick={carousel.prev}>← Prev</button>
        <button className="btn btn-sm" onClick={carousel.next}>Next →</button>
      </div>
      <div ref={carousel.ref} className="carousel w-full">
        <div className="carousel-item w-full"><div className="badge badge-primary w-full h-32">Slide 1</div></div>
        <div className="carousel-item w-full"><div className="badge badge-secondary w-full h-32">Slide 2</div></div>
        <div className="carousel-item w-full"><div className="badge badge-accent w-full h-32">Slide 3</div></div>
      </div>
    </>
  )
}

Claude コード、Cursor、または別の AI エディターを使用していますか?

Cherry MCP は、AI エディタに正確な カルーセル クラス名と構造をオンデマンドで提供します。もう幻覚のような授業はありません。

Cherry MCP を試してみる