1
resposta

[Projeto] Carrosel não funciona

Apliquei o carrosel que foi usado nessa aula e p mesmo não funcionou... A primeira imagem e as setas aparecem, mas ele permanece estático.

O que pode ocasionar isso?

HTML

<section class="carrosel">
        <h2 class="texto__carrosel">Conheça as suas possibilidades</h2>
        <!-- O CÓDIGO ABAIXO FAZ PARTE DO PROCESSO DE IMPORTAÇÃO DO "Swiper.js" QUE É UMA BIBLIOTECA QUE CRIA O CARROSEL DE IMAGENS. PARA ISSO TAMBÉM FOI ADICIONADO UM LINK NO
        <HEAD> DESTE DOCUMENTO E UM SCRIPT ANTES DO FEXHAMENTO DA TAG <BODY>. PARA MAIS INFORMAÇÕES ACESSE https://swiperjs.com/ -->
        <!-- Slider main container -->
        <div class="swiper">
          <!-- Additional required wrapper -->
          <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide"><img src="./fotos/Carrosel/Modelo 16.png"></div>
            <div class="swiper-slide"><img src="./fotos/Carrosel/Modelo 16.png"></div>
            <div class="swiper-slide"><img src="./fotos/Carrosel/333659836_6483667011661947_9087235684344061741_n.jpg"></div>
            <div class="swiper-slide"><img src="./fotos/Carrosel/338909923_266566569031064_3095339141341390177_n.jpg"></div>
            <div class="swiper-slide"><img src="./fotos/Carrosel/339806461_958387662186420_3587559994157095236_n.jpg"></div>
            ...
          </div>
          <!-- If we need pagination -->
          <div class="swiper-pagination"></div>

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

          <!-- If we need scrollbar -->
          <div class="swiper-scrollbar"></div>
        </div>
    </section>


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

CSS

.texto__carrosel{
    padding: 1em;
    padding-top: 86px;
    color: #EA8FEA;
    text-align: center;
    font-family: 'Mulish', sans-serif;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
}

.imagens__carrosel{
    background-color: #FFAACF;
}

.swiper-slide img{
    width: 266px;
    height: 466.877px;

}

.swiper-wrapper{
    text-align: center;
}

Segue link pro repositório: https://github.com/WelloNico/Projeto-Menkka

1 resposta

Oi Nicole, tudo bem com você?

Analisei o link que você enviou do repositório e a pasta com as imagens do projeto não está por lá. Acredito que isso pode ser um possível erro.

Certifique-se de que vinculou corretamente as imagens!

Espero ter ajudado. Caso continue com dúvidas, pode me perguntar por aqui.

Abraços e bons estudos!