pet-dex-frontend
pet-dex-frontend copied to clipboard
devhatt
Componente de Sliding
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
https://github.com/devhatt/pet-dex-frontend/assets/13935760/1e313985-1782-4f3f-ae94-4ebfe2d7bb0d
https://github.com/devhatt/pet-dex-frontend/assets/13935760/c6c86c01-baed-46b5-b991-1062a7c0a21b
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()eprev()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.
