5
respostas

[Dúvida] O script está diferente

Acredito que o script esteja atualizado, não está aparecendo o código script que a professora copiou. Insira aqui a descrição dessa imagem para ajudar na acessibilidade

5 respostas

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!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

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',
        },
        });