Carousel

Uso

Use o componente Carousel para exibir uma lista de itens em um carrossel.

Expandir código

Itens

Use a prop items como um array e renderize cada item usando o slot padrão:

Você também pode passar um array de objetos com as seguintes propriedades:

• class?: any
• ui?: { item?: ClassNameValue }

Você pode controlar quantos itens ficam visíveis usando as classes utilitárias basis / width no item:

Orientação

Use a prop orientation para alterar a orientação do Progress. O padrão é horizontal.

Setas

Use a prop arrows para exibir os botões de anterior e próximo.

Anterior / Próximo

Use as props prev e next para personalizar os botões de anterior e próximo com quaisquer props do Button.

Ícones de anterior / próximo

Use as props prev-icon e next-icon para personalizar o Icon dos botões. O padrão é i-lucide-arrow-left / i-lucide-arrow-right.

prevIcon

nextIcon

Pontos

Use a prop dots para exibir uma lista de pontos para rolar até um slide específico.

O número de pontos é baseado no número de slides exibidos na visualização:

Plugins

O componente Carousel implementa os plugins oficiais do Embla Carousel.

Reprodução automática

Este plugin é usado para estender o Embla Carousel com a funcionalidade de reprodução automática.

Use a prop autoplay como um booleano ou um objeto para configurar o plugin Autoplay.

Rolagem automática

Este plugin é usado para estender o Embla Carousel com a funcionalidade de rolagem automática.

Use a prop auto-scroll como um booleano ou um objeto para configurar o plugin Auto Scroll.

Altura automática

Este plugin é usado para estender o Embla Carousel com a funcionalidade de altura automática. Ele altera a altura do container do carrossel para se ajustar à altura do slide mais alto em exibição.

Use a prop auto-height como um booleano ou um objeto para configurar o plugin Auto Height.

Nomes de classe

O Class Names é um plugin utilitário de alternância de nomes de classe para o Embla Carousel que permite automatizar a alternância de nomes de classe no seu carrossel.

Use a prop class-names como um booleano ou um objeto para configurar o plugin Class Names.

Fade

Este plugin é usado para substituir a funcionalidade de rolagem do Embla Carousel por transições de fade.

Use a prop fade como um booleano ou um objeto para configurar o plugin Fade.

Gestos de roda do mouse

Este plugin é usado para estender o Embla Carousel com a capacidade de usar a roda do mouse/trackpad para navegar pelo carrossel.

Use a prop wheel-gestures como um booleano ou um objeto para configurar o plugin Wheel Gestures.

Exemplos

Com miniaturas

Você pode usar a função scrollTo da emblaApi para exibir miniaturas sob o carrossel que permitem navegar até um slide específico.

API

Props

Slots

Emits

Expose

Você pode acessar a instância tipada do componente usando useTemplateRef.

<script setup lang="ts">
const carousel = useTemplateRef('carousel')
</script>

<template>
  <NCarousel ref="carousel" />
</template>

Isso dará a você acesso ao seguinte:

Tema

export default defineAppConfig({
  ui: {
    carousel: {
      slots: {
        root: 'relative focus:outline-none',
        viewport: 'overflow-hidden',
        container: 'flex items-start',
        item: 'min-w-0 shrink-0 basis-full',
        controls: '',
        arrows: '',
        prev: 'absolute rounded-full',
        next: 'absolute rounded-full',
        dots: 'absolute inset-x-0 -bottom-7 flex flex-wrap items-center justify-center gap-3',
        dot: 'cursor-pointer size-3 bg-accented rounded-full transition'
      },
      variants: {
        orientation: {
          vertical: {
            container: 'flex-col -mt-4',
            item: 'pt-4',
            prev: 'top-4 sm:-top-12 left-1/2 -translate-x-1/2 rotate-90 rtl:-rotate-90',
            next: 'bottom-4 sm:-bottom-12 left-1/2 -translate-x-1/2 rotate-90 rtl:-rotate-90'
          },
          horizontal: {
            container: 'flex-row -ms-4',
            item: 'ps-4',
            prev: 'start-4 sm:-start-12 top-1/2 -translate-y-1/2',
            next: 'end-4 sm:-end-12 top-1/2 -translate-y-1/2'
          }
        },
        active: {
          true: {
            dot: 'data-[state=active]:bg-inverted'
          }
        }
      }
    }
  }
})

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        carousel: {
          slots: {
            root: 'relative focus:outline-none',
            viewport: 'overflow-hidden',
            container: 'flex items-start',
            item: 'min-w-0 shrink-0 basis-full',
            controls: '',
            arrows: '',
            prev: 'absolute rounded-full',
            next: 'absolute rounded-full',
            dots: 'absolute inset-x-0 -bottom-7 flex flex-wrap items-center justify-center gap-3',
            dot: 'cursor-pointer size-3 bg-accented rounded-full transition'
          },
          variants: {
            orientation: {
              vertical: {
                container: 'flex-col -mt-4',
                item: 'pt-4',
                prev: 'top-4 sm:-top-12 left-1/2 -translate-x-1/2 rotate-90 rtl:-rotate-90',
                next: 'bottom-4 sm:-bottom-12 left-1/2 -translate-x-1/2 rotate-90 rtl:-rotate-90'
              },
              horizontal: {
                container: 'flex-row -ms-4',
                item: 'ps-4',
                prev: 'start-4 sm:-start-12 top-1/2 -translate-y-1/2',
                next: 'end-4 sm:-end-12 top-1/2 -translate-y-1/2'
              }
            },
            active: {
              true: {
                dot: 'data-[state=active]:bg-inverted'
              }
            }
          }
        }
      }
    })
  ]
})

Changelog