Componente de Sliding

[Alecell]

Describe the feature
Criação de um componente de slider para navegação entre diferentes conteúdos no PetDex.

Description

Desenvolver um componente slider que permita ao usuário navegar entre diferentes conteúdos. O componente deve ser capaz de _slidar_ com swipping e com click em botões de evento.

Use Case

Esse componente será usado em várias camadas do site uma vez que existem muitos sliders em vários lugares. É util para slidarmos entre conteúdos como um banner, scroll de filmes em coisas como Netflix e etc.

Implementation Details

O slider deve ser implementado com a funcionalidade de touch para dispositivos móveis e opções de controle programático. Deve também permitir a personalização dos slides adjacentes e do slide atual de maneira fácil e acessível.

Este componente deve fazer uso da funcionalidade de swipping (#29) que expõe os eventos de swipping, deve aceitar que o seu slide atual seja controlado, ou seja, o slide atual pode ser setado manualmente pelo usuário do componente, também deve expor uma função de next() e prev() onde a pessoa pode, através do componente, ir para o anterior e proximo slide.

O componente em sua instanciação irá receber um array de componentes, cada componente sendo um elemento do slider, no caso, um slide diferente.

Visual Concepts

Embora não haja uma representação visual do componente de slider em ação, o layout atual pode ser visualizado no Figma: Layout PetDex.

Exemplos:
https://portfolio-git-master-felipeness.vercel.app/testimonials

Gravando.2024-03-04.122647.mp4

Gravando.2024-03-04.122820.mp4

Additional Information

Deve-se assegurar que o componente seja responsivo e acessível, seguindo as diretrizes de ARIA para componentes de slider.

Perguntas Pendentes:

• Como os itens adjacentes devem ser editados? Existe alguma diretriz de estilo ou funcionalidade específica para isso?
• Existe algum requisito específico para a animação entre os slides, ou isso deve ser definido em colaboração com a equipe de design?

Recomendações:

• Considerar a implementação de testes automatizados para garantir a funcionalidade do slider em diferentes cenários de uso.
• Documentar como os eventos de next() e prev() podem ser acessados e utilizados por outros componentes ou páginas.
• Avaliar a utilização de bibliotecas existentes para a funcionalidade de slider ou a necessidade de desenvolver uma solução personalizada.

[Alecell]

Obrigado por abrir a issue

Verifique os nossos guidelines:

• Código de conduta
• Contribuição
• Guia de Estilo

[lsguilherme]

eu quero!!!

[DominMFD]

eu quero!!!