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