1
resposta

[Sugestão] A paginação do vídeo não funcionou, então consegui um outro modelo bem legal

Como a paginação não funcionou pra mim, consegui resolver de outra forma que ficou legal também:

Na div coloquei a seguinte classe:

<div class="swiper-pagination-clickable"></div>

E dentro do script deixei assim:

const swiper = new Swiper('.swiper', {
    spaceBetween: 10,
    slidesPerView: 3,
    loop: true,
    
    pagination: {
        el: '.swiper-pagination-clickable',
        type: 'bullets',
        clickable: true,
    },
});

Obs.: o loop habilita a 'rolagem infinita', e eu não sei se realmente é necessário colocar o parâmetro type: 'bullets', uma vez que fiz teste sem esse parâmetro e funcionou aparentemente.

Obs.: é preciso lembrar de mudar o nome da classe no css também; e com relação a classe, também acrescentei um parâmetro extra que achei necessário nesse caso que é o 'text-align: center;'

1 resposta

Olá Renan. Parece que você encontrou uma solução bem legal para a paginação do Swiper! Algumas observações sobre o seu código:

O loop

Se ativado (loop: true), o Swiper vai automaticamente reorganizar os slides para criar um efeito contínuo, útil para carrosséis que não têm um começo/fim óbvios.

O parâmetro type: 'bullets'

Por padrão, o Swiper já usa bullets para paginação quando clickable: true está ativado. Então, se nos testes funcionou sem o parâmetro type: 'bullets', ele pode não ser estritamente necessário.

Ajuste no CSS

A adição de text-align: center; na classe da paginação faz sentido, pois alinha os bullets ao centro, melhorando a estética em muitos casos.