Chuyển đến nội dung chính
Frutjam logo Frutjam
v2.2.2
Theme

Thành phần băng chuyền

Cập nhật lần cuối:

Băng chuyền CSS Tailwind chỉ dành cho CSS sử dụng tính năng cuộn-snap. Bố cục trượt ngang với các điều khiển điều hướng và không cần JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Carousel components display multiple items in a rotating or scrollable container, ideal for showcasing images, testimonials, product galleries, or featured content. Built with semantic HTML and smooth scroll behavior, carousels support horizontal and vertical layouts with snap alignment. The Frutjam carousel system is perfect for hero sections, product galleries, testimonial displays, and content sliders.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Lớp học Kiểu Sự miêu tả
carouselCăn cứHorizontal scrollable container with snap behavior
carousel-itemCông cụ sửa đổiIndividual slide inside the carousel
carousel-verticalCông cụ sửa đổiVertical scroll direction
carousel-centerCông cụ sửa đổiSnap alignment to center of each item
carousel-endCông cụ sửa đổiSnap alignment to end of each item

Cách sử dụng cơ bản

Create a simple horizontal carousel with scrollable items.

 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>

Carousel with Images

Display image galleries with smooth scrolling and responsive sizing.

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>

Carousel Center Aligned

Display carousel items with center snap alignment and spacing between cards.

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>

Carousel Vertical

Create a vertical carousel for top-to-bottom scrolling of items.

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>

Carousel with Navigation

Add buttons for manual navigation between carousel items using anchor links.

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>

Carousel with Dot Indicators

Use small badge buttons as navigation indicators for multiple carousel items.

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 Helper

Sử dụng createCarousel từ frutjam/js hoặc useCarousel từ frutjam/react để điều hướng các trang trình bày theo chương trình — tự động tôn trọng 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>
    </>
  )
}

Using Claude Code, Cursor, or another AI editor?

Cherry MCP cung cấp cho trình soạn thảo AI của bạn tên và cấu trúc lớp băng chuyền chính xác theo yêu cầu. Không còn những lớp học ảo giác nữa.

Try Cherry MCP