As setas do carrossel não funcionam quando clico, somente quando arrastado pelo mouse.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
As setas do carrossel não funcionam quando clico, somente quando arrastado pelo mouse.
Na documentação do Swiper Js, lateral esquerda você encontra a seção Using Js Modules. Nela você encontra o codigo:
const swiper = new Swiper('.swiper', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
Só adicionar a parte do Navigation no script do HTML. Precisa de Javascript pra fazer os botões funcionarem, por isso não vimos isso na aula, mas só adicionar essas linhas no html que já funciona.
Meu código final ficou assim:
<script>
const swiper = new Swiper('.swiper', {
spaceBetween: 10,
slidesPerView: 3,
pagination: {
el: '.swiper-pagination',
type: 'bullets',
},
breakpoints: {
1024: {
spaceBetween: 50
},
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
Os "breakingpoints" são tipo Media Query, mais ou menos, com ele da pra mudar algumas configurações do carrossel em determinados tamanhos de tela, meu código eu coloquei pra aumentar o espaço entre as imagens dos livros de "spaceBetween: 10" para "spaceBetween: 50" a partir da resolução de tela 1024px.