Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Botão carrossel não funciona

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Produzindo CSS no desktop e atividade Revisando o flexbox

por Ian Almeida
| 85.9k xp | 2 posts

Acabei de assistir a aula e seguir os passos da instrutora, porem quando terminei vi q o botão next e prev, do menu carrossel, não estão funcionando na versão desktop.

Abaixo segue como esta o meu script:

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

e o CSS:

lembrando q está em @media screen and (min-width: 1728px)

.swiper-button-next, .swiper-button-prev{
        display: block;
    }
1 resposta
solução!
por Iara Nascimento Sztybe
| 13.3k xp | 6 posts

É isso aqui que você quer? https://codesandbox.io/s/5vdwrg?file=/index.html:2302-2408

Acho que faltou colocar o navigation/nextEl e navigation/prevEl;

<script>
    const swiper = new Swiper('.swiper', {
        spaceBetween: 16,
        slidesPerView: 2.7,
        pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
        },
        /* adiciona esse codigo abaixo */
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
    </script>

Se não funcionar você pode ver os códigos fontes clicando no "Core" das demos: https://swiperjs.com/demos.