Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Manipulação do script através do CSS

por Antonio Alan de Sousa Cardoso
| 100.4k xp | 12 posts

Saudações pessoal! Eu estava desenvolvendo esse projeto https://github.com/AAlan12/RaidGaming , e durante o desenvolvimento me bateu uma divida, se de acordo com a resposividade do layout, poderia altera a logica do script? Por exemplo, durante o esse meu projeto, eu uso um Swiper para cria um carrossel de imagens:

<script>
    const swiper = new Swiper('.swiper', {
        spaceBetween: 10,
        slidesPerView: 3,
        pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
        },
    });
</script>

Eu gostaria que quando o tamanho da tela fosse maior, ele passasse a exibir mais slides por view, tamanho de tala de moblie se manteasse como 3, telas maiores passasse a exibir 4. Há essa possibilidade de manipulação da logica , através da reposividade ?
1 resposta
por Lorena Garcia
| 8407.5k xp | 12274 posts
Alura Scuba Team Suporte Educacional

Oi Antonio, tudo bem?

Desculpe a demora em retornar.

Sim, há uma maneira de modificar a lógica do seu script usando a responsividade. Você pode usar a propriedade breakpoints do Swiper para definir diferentes configurações para diferentes tamanhos de tela. Por exemplo, você pode usar algo como isso:

const swiper = new Swiper('.swiper', {
    spaceBetween: 10,
    pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
    },
    breakpoints: {
        // quando a largura da janela for >= 320px
        320: {
            slidesPerView: 3,
        },
        // quando a largura da janela for  >= 480px
        480: {
            slidesPerView: 4,
        },
    },
});

Isso fará com que o número de slides por view seja definido com base no tamanho da tela. Vou deixar aqui o link da documentação se você quiser dar uma lida.

Lembre-se de que é importante testar a responsividade em diferentes dispositivos para garantir que a lógica esteja funcionando corretamente.

Espero ter ajudado.

Um abraço e bons estudos.