Ir para o conteúdo principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente carrossel

Última atualização:

Carrossel CSS Tailwind somente CSS usando scroll-snap. Layout de slide horizontal com controles de navegação e sem necessidade de JavaScript. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.

Os componentes do carrossel exibem vários itens em um contêiner giratório ou rolável, ideal para exibir imagens, depoimentos, galerias de produtos ou conteúdo em destaque. Construídos com HTML semântico e comportamento de rolagem suave, os carrosséis suportam layouts horizontais e verticais com alinhamento instantâneo. O sistema de carrossel Frutjam é perfeito para seções de heróis, galerias de produtos, exibições de depoimentos e controles deslizantes de conteúdo.

Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.

Aula Tipo Descrição
carouselBaseContêiner rolável horizontal com comportamento instantâneo
carousel-itemModificadorSlide individual dentro do carrossel
carousel-verticalModificadorDireção de rolagem vertical
carousel-centerModificadorAjustar o alinhamento ao centro de cada item
carousel-endModificadorAjustar o alinhamento ao final de cada item

Uso Básico

Crie um carrossel horizontal simples com itens roláveis.

 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>

Carrossel com Imagens

Exiba galerias de imagens com rolagem suave e dimensionamento responsivo.

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>

Carrossel alinhado ao centro

Exiba itens do carrossel com alinhamento centralizado e espaçamento entre cartões.

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>

Carrossel vertical

Crie um carrossel vertical para rolagem de itens de cima para baixo.

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>

Carrossel com navegação

Adicione botões para navegação manual entre itens do carrossel usando links de âncora.

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>

Carrossel com indicadores de pontos

Use pequenos botões de crachá como indicadores de navegação para vários itens do carrossel.

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>

Ajudante JS e React

Use createCarousel de frutjam/js ou useCarousel de frutjam/react para navegar pelos slides programaticamente - respeita prefers-reduced-motion automaticamente.

 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>
    </>
  )
}

Usando Claude Code, Cursor ou outro editor de IA?

Cherry MCP fornece ao seu editor de IA os nomes exatos das classes Carrossel e a estrutura sob demanda. Chega de aulas alucinadas.

Experimente o Cherry MCP