Acredito que o script esteja atualizado, não está aparecendo o código script que a professora copiou.
Acredito que o script esteja atualizado, não está aparecendo o código script que a professora copiou.
Segue abaixo o html e o js do Swiper:
<section class="carrossel">
<h2 class="carrossel-titulo">Ultimos lançamentos</h2>
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="./imgCarrossel/ApacheKafka.svg" alt="livro de apachekafka da alurabooks"></div>
<div class="swiper-slide"><img src="./imgCarrossel/Liderança.svg" alt="livro de liderança em design da alurabooks"></div>
<div class="swiper-slide"><img src="./imgCarrossel/Javascript.svg" alt="livro de javascript assincrono da alurabooks"></div>
<div class="swiper-slide"><img src="./imgCarrossel/Angular.svg" alt="livro de angular da alurabooks"></div>
<div class="swiper-slide"><img src="./imgCarrossel/ReactNative.svg" alt="livro de ReactNative da alurabooks"></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', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
</script>
Olá, Guilherme! Como vai?
Bela observação. Isso ocorreu provavelmente por conta de alguma atualização na página mesmo.
Para encontrar o código devido, indico esse tópico onde, de uma forma mais extensa, eu explico onde encontrá-lo.
Espero ter ajudado. Fico à disposição!
Abraço!
Poxa, mesmo assim eu n conseguir entender oque vai ficar dentro da tag script
Olá Guilherme tudo bem? eu tbm tive dificuldade de encontrar os scripts do Pagination, acredito que por atualização, porem é possível digitar na mão o que a instrutora copiou pois são poucos scripts segue como ficou o meu no final do código troque sua const por essa:
<script>
const swiper = new Swiper('.swiper', {
spaceBetween: 10,
slidesPerView: 3,
pagination: {
el: '.swiper-pagination',
type: 'bullets',
},
});
</script>
</body>
</html>
e coloque a sua linha da <div class="swiper-pagination"></div>
acima da linha onde tem a <div class="swiper-wrapper">
no meu caso linha 62 tente essas duas alterações...
Põem esse script no js:
const swiper = new Swiper('.swiper', {
// Optional parameters
spaceBetween: 10,
slidesPerView: 3,
direction: 'horizontal',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});