Pular para o conteúdo
Smart UIVATSE interface system
VATSE.DEV
← Catálogomedia · stable

Carousel

Slides com controles explícitos, toque e teclado. A documentação abaixo separa composição, comportamento e adaptação visual de cada variante.

QUANDO USAR

Use Carousel quando a interface precisar de slides com controles explícitos, toque e teclado.

QUANDO NÃO USAR

Evite a família quando uma composição semântica mais simples comunicar a mesma ação com menos carga visual.

TECLADO

A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

RESPONSIVO

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

Ver prévias
WIDE · stable

Slides básicos (1)

Slides básicos (1), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-carousel" data-autoplay="0" data-slides="1">
                <div class="sc-carousel-track">
                  <div class="sc-carousel-slide">
                    <div class="sc-carousel-card">
                      <h3>Slide 1</h3>
                      <p class="doc-muted">Conteúdo do slide (texto, card, imagem, etc).</p>
                    </div>
                  </div>
                  <div class="sc-carousel-slide">
                    <div class="sc-carousel-card">
                      <h3>Slide 2</h3>
                      <p class="doc-muted">Funciona com mouse, touch e scroll.</p>
                    </div>
                  </div>
                  <div class="sc-carousel-slide">
                    <div class="sc-carousel-card">
                      <h3>Slide 3</h3>
                      <p class="doc-muted">Dots e prev/next via Smart UI Engine.</p>
                    </div>
                  </div>
                </div>
                <div class="sc-carousel-controls">
                  <div class="sc-carousel-buttons">
                    <button class="sc-btn sc-btn-glass sc-btn-icon" type="button" data-carousel-prev="" aria-label="Anterior">
                      <i class="sc-icon" data-smart-icon="chevrons-left"></i>
                    </button>
                    <button class="sc-btn sc-btn-primary sc-btn-icon" type="button" data-carousel-next="" aria-label="Próximo">
                      <i class="sc-icon" data-smart-icon="chevrons-right"></i>
                    </button>
                  </div>
                  <!-- dots são gerados via JS -->
                </div>
              </div>
Classes, JavaScript e API
sc-carouselsc-carousel-tracksc-carousel-slidesc-carousel-cardsc-carousel-controlssc-carousel-buttonssc-btnsc-btn-glasssc-btn-iconsc-iconsc-btn-primary

Inicialize carousels após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
carousels
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

WIDE · stable

Cards (2 por view)

Cards (2 por view), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-carousel" data-autoplay="0" data-slides="2">
                <div class="sc-carousel-track">
                  <div class="sc-carousel-slide"><div class="sc-carousel-card"><span class="sc-badge">UX</span><h3 style="margin:12px 0 6px;">Card A</h3><p class="doc-muted" style="margin:0;">Descrição curta.</p></div></div>
                  <div class="sc-carousel-slide"><div class="sc-carousel-card"><span class="sc-badge sc-badge-success">UI</span><h3 style="margin:12px 0 6px;">Card B</h3><p class="doc-muted" style="margin:0;">Descrição curta.</p></div></div>
                  <div class="sc-carousel-slide"><div class="sc-carousel-card"><span class="sc-badge sc-badge-secondary">CTA</span><h3 style="margin:12px 0 6px;">Card C</h3><p class="doc-muted" style="margin:0;">Descrição curta.</p></div></div>
                  <div class="sc-carousel-slide"><div class="sc-carousel-card"><span class="sc-badge sc-badge-warning">Hot</span><h3 style="margin:12px 0 6px;">Card D</h3><p class="doc-muted" style="margin:0;">Descrição curta.</p></div></div>
                </div>
                <div class="sc-carousel-controls">
                  <div class="sc-carousel-buttons">
                    <button class="sc-btn sc-btn-glass sc-btn-icon" type="button" data-carousel-prev="" aria-label="Anterior"><i class="sc-icon" data-smart-icon="chevrons-left"></i></button>
                    <button class="sc-btn sc-btn-primary sc-btn-icon" type="button" data-carousel-next="" aria-label="Próximo"><i class="sc-icon" data-smart-icon="chevrons-right"></i></button>
                  </div>
                </div>
              </div>
Classes, JavaScript e API
sc-carouselsc-carousel-tracksc-carousel-slidesc-carousel-cardsc-badgesc-badge-successsc-badge-secondarysc-badge-warningsc-carousel-controlssc-carousel-buttonssc-btnsc-btn-glasssc-btn-iconsc-iconsc-btn-primary

Inicialize carousels após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
carousels
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

WIDE · stable

Cards (3 por view)

Cards (3 por view), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-carousel" data-autoplay="0" data-slides="3">
                <div class="sc-carousel-track">
                  <div class="sc-carousel-slide"><div class="sc-carousel-card"><strong>1</strong><p class="doc-muted" style="margin:10px 0 0;">Mini card</p></div></div>
                  <div class="sc-carousel-slide"><div class="sc-carousel-card"><strong>2</strong><p class="doc-muted" style="margin:10px 0 0;">Mini card</p></div></div>
                  <div class="sc-carousel-slide"><div class="sc-carousel-card"><strong>3</strong><p class="doc-muted" style="margin:10px 0 0;">Mini card</p></div></div>
                  <div class="sc-carousel-slide"><div class="sc-carousel-card"><strong>4</strong><p class="doc-muted" style="margin:10px 0 0;">Mini card</p></div></div>
                  <div class="sc-carousel-slide"><div class="sc-carousel-card"><strong>5</strong><p class="doc-muted" style="margin:10px 0 0;">Mini card</p></div></div>
                </div>
                <div class="sc-carousel-controls">
                  <div class="sc-carousel-buttons">
                    <button class="sc-btn sc-btn-glass sc-btn-icon" type="button" data-carousel-prev="" aria-label="Anterior"><i class="sc-icon" data-smart-icon="chevrons-left"></i></button>
                    <button class="sc-btn sc-btn-primary sc-btn-icon" type="button" data-carousel-next="" aria-label="Próximo"><i class="sc-icon" data-smart-icon="chevrons-right"></i></button>
                  </div>
                </div>
              </div>
Classes, JavaScript e API
sc-carouselsc-carousel-tracksc-carousel-slidesc-carousel-cardsc-carousel-controlssc-carousel-buttonssc-btnsc-btn-glasssc-btn-iconsc-iconsc-btn-primary

Inicialize carousels após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
carousels
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

WIDE · stable

Autoplay

Autoplay, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-carousel sc-carousel--glass" data-autoplay="3000" data-slides="1">
                <div class="sc-carousel-track">
                  <div class="sc-carousel-slide"><div class="sc-carousel-card"><strong>Auto 1</strong><p class="doc-muted">Troca automática.</p></div></div>
                  <div class="sc-carousel-slide"><div class="sc-carousel-card"><strong>Auto 2</strong><p class="doc-muted">Troca automática.</p></div></div>
                  <div class="sc-carousel-slide"><div class="sc-carousel-card"><strong>Auto 3</strong><p class="doc-muted">Troca automática.</p></div></div>
                </div>
                <div class="sc-carousel-controls">
                  <div class="sc-carousel-buttons">
                    <button class="sc-btn sc-btn-glass sc-btn-icon" type="button" data-carousel-prev="" aria-label="Anterior"><i class="sc-icon" data-smart-icon="chevrons-left"></i></button>
                    <button class="sc-btn sc-btn-primary sc-btn-icon" type="button" data-carousel-next="" aria-label="Próximo"><i class="sc-icon" data-smart-icon="chevrons-right"></i></button>
                  </div>
                </div>
              </div>
Classes, JavaScript e API
sc-carouselsc-carousel--glasssc-carousel-tracksc-carousel-slidesc-carousel-cardsc-carousel-controlssc-carousel-buttonssc-btnsc-btn-glasssc-btn-iconsc-iconsc-btn-primary

Inicialize carousels após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
carousels
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

WIDE · stable

Imagens

Imagens, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-carousel sc-carousel--peek" data-autoplay="0" data-slides="1">
                <div class="sc-carousel-track">
                  <div class="sc-carousel-slide">
                    <div class="sc-carousel-card sc-carousel-card--media">
                      <img src="/assets/slide (1).svg" alt="Slide imagem 1">
                      <div class="sc-carousel-card-body">
                        <strong>Imagem 1</strong>
                        <p class="doc-muted" style="margin: 8px 0 0;">Peek do próximo slide (UX melhor).</p>
                      </div>
                    </div>
                  </div>
                  <div class="sc-carousel-slide">
                    <div class="sc-carousel-card sc-carousel-card--media">
                      <img src="/assets/slide (2).svg" alt="Slide imagem 2">
                      <div class="sc-carousel-card-body">
                        <strong>Imagem 2</strong>
                        <p class="doc-muted" style="margin: 8px 0 0;">Legenda + hierarquia.</p>
                      </div>
                    </div>
                  </div>
                  <div class="sc-carousel-slide">
                    <div class="sc-carousel-card sc-carousel-card--media">
                      <img src="/assets/slide (3).svg" alt="Slide imagem 3">
                      <div class="sc-carousel-card-body">
                        <strong>Imagem 3</strong>
                        <p class="doc-muted" style="margin: 8px 0 0;">Design consistente no tema.</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="sc-carousel-controls">
                  <div class="sc-carousel-buttons">
                    <button class="sc-btn sc-btn-glass sc-btn-icon" type="button" data-carousel-prev="" aria-label="Anterior"><i class="sc-icon" data-smart-icon="chevrons-left"></i></button>
                    <button class="sc-btn sc-btn-primary sc-btn-icon" type="button" data-carousel-next="" aria-label="Próximo"><i class="sc-icon" data-smart-icon="chevrons-right"></i></button>
                  </div>
                </div>
              </div>
Classes, JavaScript e API
sc-carouselsc-carousel--peeksc-carousel-tracksc-carousel-slidesc-carousel-cardsc-carousel-card--mediasc-carousel-card-bodysc-carousel-controlssc-carousel-buttonssc-btnsc-btn-glasssc-btn-iconsc-iconsc-btn-primary

Inicialize carousels após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
carousels
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

WIDE · stable

Testimonials

Testimonials, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-carousel sc-carousel--center sc-carousel--spotlight" data-autoplay="0" data-slides="1">
                <div class="sc-carousel-track">
                  <div class="sc-carousel-slide">
                    <div class="sc-carousel-card">
                      <p style="margin:0;">“Tema ficou perfeito  dá pra sentir a identidade em cada componente.”</p>
                      <p class="doc-muted" style="margin:10px 0 0;"> Cliente A</p>
                    </div>
                  </div>
                  <div class="sc-carousel-slide">
                    <div class="sc-carousel-card">
                      <p style="margin:0;">“Component-first com docs por modelos é o caminho.”</p>
                      <p class="doc-muted" style="margin:10px 0 0;"> Cliente B</p>
                    </div>
                  </div>
                </div>
                <div class="sc-carousel-controls">
                  <div class="sc-carousel-buttons">
                    <button class="sc-btn sc-btn-glass sc-btn-icon" type="button" data-carousel-prev="" aria-label="Anterior"><i class="sc-icon" data-smart-icon="chevrons-left"></i></button>
                    <button class="sc-btn sc-btn-primary sc-btn-icon" type="button" data-carousel-next="" aria-label="Próximo"><i class="sc-icon" data-smart-icon="chevrons-right"></i></button>
                  </div>
                </div>
              </div>
Classes, JavaScript e API
sc-carouselsc-carousel--centersc-carousel--spotlightsc-carousel-tracksc-carousel-slidesc-carousel-cardsc-carousel-controlssc-carousel-buttonssc-btnsc-btn-glasssc-btn-iconsc-iconsc-btn-primary

Inicialize carousels após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
carousels
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

WIDE · stable

Spotlight (cards com foco)

Spotlight (cards com foco), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-carousel sc-carousel--peek sc-carousel--spotlight" data-autoplay="0" data-slides="1">
                <div class="sc-carousel-track">
                  <div class="sc-carousel-slide"><div class="sc-carousel-card"><span class="sc-badge">Destaque</span><h3 style="margin:12px 0 6px;">Card 1</h3><p class="doc-muted" style="margin:0;">Slide ativo “cresce”.</p></div></div>
                  <div class="sc-carousel-slide"><div class="sc-carousel-card"><span class="sc-badge sc-badge-secondary">UI</span><h3 style="margin:12px 0 6px;">Card 2</h3><p class="doc-muted" style="margin:0;">Mais contraste e legibilidade.</p></div></div>
                  <div class="sc-carousel-slide"><div class="sc-carousel-card"><span class="sc-badge sc-badge-success">UX</span><h3 style="margin:12px 0 6px;">Card 3</h3><p class="doc-muted" style="margin:0;">Sem ficar “quadradão”.</p></div></div>
                </div>
                <div class="sc-carousel-controls">
                  <div class="sc-carousel-buttons">
                    <button class="sc-btn sc-btn-glass sc-btn-icon" type="button" data-carousel-prev="" aria-label="Anterior"><i class="sc-icon" data-smart-icon="chevrons-left"></i></button>
                    <button class="sc-btn sc-btn-primary sc-btn-icon" type="button" data-carousel-next="" aria-label="Próximo"><i class="sc-icon" data-smart-icon="chevrons-right"></i></button>
                  </div>
                </div>
              </div><div class="doc-muted" style="margin: 18px 0 10px;">Extra • Carousel 3D (Featured Cards)</div><div class="sc-carousel-3d" data-autoplay="4500" aria-roledescription="carousel" aria-label="Featured cards">
                <div class="sc-carousel-3d-viewport" tabindex="0">
                  <div class="sc-carousel-3d-track">
                    <article class="sc-carousel-3d-slide" role="group" aria-roledescription="slide">
                      <div class="sc-feature-card" style="--sc-feature-bg:url('/assets/slide (1).svg');">
                        <header class="sc-feature-head">
                          <h3 class="sc-feature-title">Edge Visuals</h3>
                          <p class="sc-feature-kicker">Design systems que respiram</p>
                        </header>
                        <p class="sc-feature-text">Tokens, motion e acessibilidade: base forte sem perder personalidade. Rápido de aplicar, consistente de manter.</p>
                        <footer class="sc-feature-actions"><button class="sc-btn sc-btn-primary" type="button">Ver case</button></footer>
                      </div>
                    </article>

                    <article class="sc-carousel-3d-slide" role="group" aria-roledescription="slide">
                      <div class="sc-feature-card" style="--sc-feature-bg:url('/assets/slide (2).svg');">
                        <header class="sc-feature-head">
                          <h3 class="sc-feature-title">Realtime Dashboards</h3>
                          <p class="sc-feature-kicker">Sinal acima do ruído</p>
                        </header>
                        <p class="sc-feature-text">Destaque deltas, suavize picos e deixe o olho encontrar o que importa primeiro. UI como instrumento, não decoração.</p>
                        <footer class="sc-feature-actions"><button class="sc-btn sc-btn-glass" type="button">Ver demo</button></footer>
                      </div>
                    </article>

                    <article class="sc-carousel-3d-slide" role="group" aria-roledescription="slide">
                      <div class="sc-feature-card" style="--sc-feature-bg:url('/assets/slide (3).svg');">
                        <header class="sc-feature-head">
                          <h3 class="sc-feature-title">Brand Motion</h3>
                          <p class="sc-feature-kicker">Identidade em movimento</p>
                        </header>
                        <p class="sc-feature-text">Easing, timing e contraste com intenção. Quando a animação é parte da marca, ela vira memória.</p>
                        <footer class="sc-feature-actions"><button class="sc-btn sc-btn-outline" type="button">Explorar</button></footer>
                      </div>
                    </article>

                    <article class="sc-carousel-3d-slide" role="group" aria-roledescription="slide">
                      <div class="sc-feature-card" style="--sc-feature-bg:url('/assets/slide (4).svg');">
                        <header class="sc-feature-head">
                          <h3 class="sc-feature-title">E-commerce UX</h3>
                          <p class="sc-feature-kicker">Caminhos sem atrito</p>
                        </header>
                        <p class="sc-feature-text">Escolha mais curta, confiança mais alta. Checkout em um sopro (com acessibilidade e estados claros).</p>
                        <footer class="sc-feature-actions"><button class="sc-btn sc-btn-success" type="button">Ver padrões</button></footer>
                      </div>
                    </article>

                    <article class="sc-carousel-3d-slide" role="group" aria-roledescription="slide">
                      <div class="sc-feature-card" style="--sc-feature-bg:url('/assets/slide (5).svg');">
                        <header class="sc-feature-head">
                          <h3 class="sc-feature-title">Content Engines</h3>
                          <p class="sc-feature-kicker">Escalar sem virar sludge</p>
                        </header>
                        <p class="sc-feature-text">Conteúdo estruturado, defaults inteligentes e visual limpo. Publique com consistência, sem “quebrar tema”.</p>
                        <footer class="sc-feature-actions"><button class="sc-btn sc-btn-danger" type="button">Ler playbook</button></footer>
                      </div>
                    </article>
                  </div>
                </div>

                <div class="sc-carousel-3d-controls" aria-label="Controles">
                  <button class="sc-btn sc-btn-glass sc-btn-icon sc-carousel-3d-prev" data-3d-prev="" aria-label="Anterior" type="button">
                    <i class="sc-icon" data-smart-icon="chevrons-left"></i>
                  </button>
                  <button class="sc-btn sc-btn-glass sc-btn-icon sc-carousel-3d-next" data-3d-next="" aria-label="Próximo" type="button">
                    <i class="sc-icon" data-smart-icon="chevrons-right"></i>
                  </button>
                </div>

                <div class="sc-carousel-3d-pagination" role="tablist" aria-label="Navegação"></div>
                <div class="sc-carousel-3d-progress" aria-hidden="true"><span class="sc-carousel-3d-progressBar"></span></div>
              </div>
Classes, JavaScript e API
sc-carouselsc-carousel--peeksc-carousel--spotlightsc-carousel-tracksc-carousel-slidesc-carousel-cardsc-badgesc-badge-secondarysc-badge-successsc-carousel-controlssc-carousel-buttonssc-btnsc-btn-glasssc-btn-iconsc-iconsc-btn-primarysc-carousel-3dsc-carousel-3d-viewportsc-carousel-3d-tracksc-carousel-3d-slidesc-feature-cardsc-feature-headsc-feature-titlesc-feature-kickersc-feature-textsc-feature-actionssc-btn-outlinesc-btn-successsc-btn-dangersc-carousel-3d-controlssc-carousel-3d-prevsc-carousel-3d-nextsc-carousel-3d-paginationsc-carousel-3d-progresssc-carousel-3d-progressBar

Inicialize carousels após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
carousels
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

Componentes relacionados

Music player →Galerias →Photo rail →