Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

SlidesPerView não está funcionando de acordo

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Produzindo CSS no desktop e atividade Revisando o flexbox

por Guilherme Marzagão Alverne Facundo Leite
| 88.8k xp | 3 posts
Estagiário

Meu código do carrossel slidesPerView não está funcionando de acordo.

Percebi que meu carrossel apresenta apenas 1 livro da lista de 5 livros.

Abaixo segue como está a configuração do meu script:

 <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
   <script>
        const swiper = new Swiper('.swiper', {
        spaceBetween: 10,
        SlidesPerview: 3,
        pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
        }
    });
    </script>

e o CSS:

da classe da img (swiper-slide) está conforme abaixo:


.swiper-slide img{
    width:100%;
}

Alguém passou por isso?

Mesmo que eu defina o width no CSS para 10%, é apresentado apenas a imagem de 1 livro e não funciona o botão de passador. O problema começou a ser apresentado após iniciar as edições para deixar o layout responsivo.

2 respostas
solução!
por Renan Lima
| 3460.2k xp | 7305 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Guilherme.

Tudo bem?

Isso está acontecendo porque tem um erro de digitação no meio do seu <script> ali no SlidesPerview: 3, você escreveu Slides com "S" maiúsculo sendo que é minúsculo e o "V" do perView você colocou minúsculo sendo que maiúsculo.

O correto é: slidesPerView: 3,

 <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
     <script>
          const swiper = new Swiper('.swiper', {
          spaceBetween: 10,
          slidesPerView: 3,
          pagination: {
              el: '.swiper-pagination',
              type: 'bullets',
          }
      });
      </script>

Espero ter ajudado, qualquer dúvida conta com a gente :)

por Guilherme Marzagão Alverne Facundo Leite
| 88.8k xp | 3 posts
Estagiário

Olá Renan!

Obrigado pela dica! Realmente funcionou.