As setas do carrossel não funcionam.

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.