Carousel com Offset à Direita
Vou criar um componente de carrossel horizontal que sempre mostra parte do próximo item, independentemente do tamanho da tela.
Características do Carrossel
Este carrossel horizontal tem as seguintes características:
- Offset à Direita: Sempre mostra parte do próximo item, criando um efeito visual que convida o usuário a navegar.
Responsivo: Adapta-se a diferentes tamanhos de tela:
- Em dispositivos móveis: Mostra 85% de um item e 15% do próximo
- Em tablets: Mostra 60% de um item e 40% do próximo
- Em desktops: Mostra 40% de um item e 60% do próximo
- Navegação Intuitiva: Botões de navegação para avançar e retroceder, com estados desabilitados quando não há mais itens.
- Design Elegante: Cards com imagem, título e descrição, com bordas arredondadas e sombras sutis.
Como Funciona
O componente usa o embla-carousel-react para gerenciar o carrossel e implementa:
- Configuração
align: "start" para alinhar os itens à esquerda - Padding à esquerda (
pl-4) em cada item para criar espaçamento - Larguras flexíveis responsivas usando classes Tailwind como
flex-[0_0_85%] - Controle de estado para habilitar/desabilitar os botões de navegação
Você pode personalizar o conteúdo dos cards e ajustar as proporções conforme necessário para seu projeto.