Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Sugestão] slider passando em loop e altomatico

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Integrando o Carrossel com SwiperJS e atividade Carrossel com SwiperJS

por Yasmim Marly Passos
| 23.8k xp | 3 posts

Olá pessoal, olhando a documentação do swiper eu descobri como fazer para que quando o slider chegar na ultima imagem retorne para a primeira, para isso é só adicionar no script do código:

loop: true,

ficando: 

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

e para fazer com que as imagens passe automaticamente é só ativar o autoplay, da seguinte forma:

autoplay: {
                delay: 3000,
            },

obs: esse delay está em micro segundos, então a imagem passa a cada 3 segundos.

Para complementar, eu vi em outros foruns como deixar as páginas laterais mostrando só a metade, conforme está no figma, que é modificando o slidesPerView para 2, onde mostra 2 paginas completas, e ativar o centeredSlides.

No final o código script ficou da seguinte maneira:

const swiper = new Swiper('.swiper', {
            spaceBetween: 10,
            slidesPerView: 2,
            pagination: {
                el: '.swiper-pagination',
                type: 'bullets',
            },
            autoplay: {
                delay: 3000,
            },
            loop: true,
            centeredSlides: true
        });

obs: o ponto negativo de estar em loop o carrossel é que ficam seis bolinhas na paginação e não mais quatro, se alguém souber como arrumar manda aqui.

1 resposta
solução!
por Lorena Garcia
| 7895k xp | 11433 posts
Alura Scuba Team Suporte Educacional

Oii Yasmim, tudo bem?

Que bom que você está explorando o SwiperJS e compartilhando suas descobertas! O código que você apresentou está ótimo e cobre bem as funcionalidades de loop e autoplay. Sobre o problema das bolinhas de paginação, isso ocorre porque o SwiperJS cria slides duplicados para permitir o loop contínuo, o que aumenta o número de bolinhas.

Pra resolver isso, você pode usar uma combinação de CSS e JavaScript para esconder as bolinhas extras. Aqui está uma sugestão de como fazer isso:

  1. Adicionar uma classe CSS para esconder as bolinhas extras:
.swiper-pagination-bullet {
    display: none;
}

.swiper-pagination-bullet:nth-child(-n+4) {
    display: inline-block;
}
  1. Modificar o JavaScript para adicionar essa classe apenas quando o loop estiver ativado:
const swiper = new Swiper('.swiper', {
    spaceBetween: 10,
    slidesPerView: 2,
    pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
    },
    autoplay: {
        delay: 3000,
    },
    loop: true,
    centeredSlides: true,
    on: {
        init: function () {
            const bullets = document.querySelectorAll('.swiper-pagination-bullet');
            bullets.forEach((bullet, index) => {
                if (index >= 4) {
                    bullet.style.display = 'none';
                }
            });
        },
        slideChange: function () {
            const bullets = document.querySelectorAll('.swiper-pagination-bullet');
            bullets.forEach((bullet, index) => {
                if (index >= 4) {
                    bullet.style.display = 'none';
                }
            });
        }
    }
});

Com essas mudanças, apenas as primeiras quatro bolinhas de paginação serão exibidas, mesmo com o loop ativado.

gif demonstrando o resultado

Espero ter ajudado.

Um abraço e bons estudos.