[Bug] swiper-button não aparece | HTML e CSS: responsividade com mobile-first

3
respostas

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Selecionando Media Queries e atividade Variações na página

por Natianni Layane Rodrigues Wanderley

| 13k xp | 10 posts

Na versão de tablet (1024px) não consigo fazer o swiper-button aparecer mesmo seguindo os passos da instrutora. Segue o código:

HTML:

            <div class="swiper">
                <!-- If we need pagination -->
                <div class="swiper-pag"></div>
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                <!-- Slides -->
                
                <div class="swiper-slide"><img src="/assets/books/Javascript.png" alt="livro sobre javascript da Alurabooks"></div>
                <div class="swiper-slide"><img src="/assets/books/Gestão2.png" alt="livro sobre gestão numero 2 da AluraBooks"></div>
                <div class="swiper-slide"><img src="/assets/books/Nodejs.png" alt="livro sobre node java script da alura books"></div>
                <div class="swiper-slide"><img src="/assets/books/ReactNative.png" alt="livro da alura books sobre react ReactNative"></div>
                <div class="swiper-slide"><img src="/assets/books/Construct2.png" alt="livro da alura books sobre contruct numero 2"></div>
                
                </div>
                
                <!-- If we need navigation buttons -->
                <div class="swiper-button-p"></div>
                <div class="swiper-button-n"></div>

...

<script>
    const swiper = new Swiper('.swiper', {
    speed: 400,
    spaceBetween: 10,
    slidesPerView: 3,
    loop: true,
            pagination: {
        el: '.swiper-pag',
        clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    });
</script>

CSS:

    .swiper-button-p, .swiper-button-n {
        display: block;
        top: 60%;
    }

Aqui o link do codigo completo no GitHub: https://github.com/Natianni/Alura-Books

3 respostas

por RODRIGO SILVA HARDER

| 1881k xp | 4105 posts

Alura Scuba Team Monitor de Fórum Ops

1 semana atrás

Oi, Natianni, tudo bem?

O problema que você está enfrentando acontece, pois você alterou o nome das classes dos botões do swiper e manteve os nomes da classe na definição do script que define os botões.

<div class="swiper-button-p"></div>
<div class="swiper-button-n"></div>

Recomendo que você mantenha as classes que você importou da biblioteca do swiper. Ficaria assim:

<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

Dessa forma, os botões de próximo e anterior serão mostrados na tela.

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

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

por Natianni Layane Rodrigues Wanderley

| 13k xp | 10 posts

1 semana atrás

Então, na vdd eu troquei o nome das classes para resolver outro problema no codigo. Para a versão de celular as setas não aparecem, só que eu só consegui remover elas trocando o nome da classe, assim:

.swiper-button-p, 
.swiper-button-n{
    display: none;
}

Deixando o nome original (.swiper-button-prev, .swiper-button-next) e colocando o mesmo comando elas não sumiam. Daí recebi essa dica de trocar o nome aqui mesmo no forúm. Aí estou presa num loop, ou elas aprecem em todos os layouts ou somem em todos kkkkkkk. A não ser q tenha outra solução.

por RODRIGO SILVA HARDER

| 1881k xp | 4105 posts

Alura Scuba Team Monitor de Fórum Ops

3 dias atrás

Oi, Natianni, como vai?

Desculpe a demora em te responder!

Você pode manter os nomes das classes dos botões swiper-button-prev e swiper-button-next. Você deve utilizar os seguintes códigos no arquivo "carrossel.css":

.swiper-button-prev, 
.swiper-button-next{
    display: none;
}

@media screen and (min-width: 1024px) {
    .swiper-button-prev,
    .swiper-button-next {
        display: block;
        top: 60%;
    }
}

O primeiro bloco de código, faz com que os botões não sejam mostrados, enquanto o segundo mostra os botões em versões de tela acima de 1024 pixels.

Também percebi que faltam algumas importações de links dentro da tag head do seu arquivo "index.html". Você pode copiar todas as importações utilizadas, no código abaixo:

    <link rel="stylesheet" href="reset.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles/style.css">

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

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