Entrar Ainda não tem acesso?
1
resposta

nao consigo criar o segundo carrossel

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

por Pedro Tiago Da Cruz Moreira
| 45.2k xp | 5 posts

Novos lançamentos

... 
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

Talvez você também se interesse por...

Angular 11 e Firebase

Construindo uma aplicação integrada com a plataforma do Google.

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

<section class="carrossel">
<h2 class="carrossel__titulo">mais vendidos</h2>
<!-- Slider main container -->
<div class="swiper">
    <!-- Additional required wrapper -->
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide"><img src="./image/ApacheKafka.svg"></div>
      <div class="swiper-slide"><img src="./image/Liderança.svg"></div>
      <div class="swiper-slide"><img src="./image/Javascript.svg"></div>
      <div class="swiper-slide"><img src="./image/Guia Front-end.svg"></div>
      <div class="swiper-slide"><img src="./image/Portugol.svg"></div>
      <div class="swiper-slide"><img src="./image/Acessibilidade.svg"></div>
      ...
    </div>
  
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

Autora do Mês

Juliana Agarikov

Analista de sistemas e escritora, Juliana é especialista em Front-End.

Saiba mais
1 resposta
por Renan Lima
| 3391.4k xp | 7170 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Pedro.

Tudo bem?

Verifica se você adicionou o link do swiper dentro da tag <head> no seu HTML, ele tem que estar antes do link do CSS de styles.css, algo como:

<!-- Código a cima omitido -->

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" /> 
    <link rel="stylesheet" href="styles.css">
</head>

Percebi no seu código que você colocou o <script> do JavaScript no meio do código HTML, logo após a tag de fechamento da <section>, depois da div de classe card__botoes, que está errado, o <script> do JavaScript precisa ser a última coisa do <body>, antes da tag de fechamento do </body>, algo como:

<!-- Código acima omitido -->

    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js">
    <script>
        const swiper = new Swiper('.swiper', {
            speed: 400,
            spaceBetween: 100,
        });
    </script>
</body>

No CSS você pode adicionar um width: 100%; na classe das imagens do carrossel que é swiper-slide img passando a tag img no final, para definir a largura das imagens como 100%, para não ficarem uma em cima da outra:

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

Juntei essas informações como base para utilizar o swiper no carrossel, baseado na aula, se não funcionar ou não for isso, você vai precisar mandar mais detalhes do que você tentou e o que está dando errado, assim conseguimos elaborar uma resposta mais assertiva.

Espero ter ajudado. Qualquer dúvida manda aqui. Valeu.