Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Como aumentar e afastar as imagens dos livros nos carrosseis.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Boa tarde. Estou tentando aumentar o tamanho dessas imagens, mas toda vez que altero sua 'width', elas começam a se sobrepor. Alguém consegue me ajudar? Segue link do repositório no GitHub --> https://github.com/SaulVasconcelos/AluraBooks/tree/main/AluraBooks

1 resposta
solução!

Oi Saul, tudo bem?

Eu baixei seu repositório e fiz alguns testes aqui e pelo que percebi já está tudo certo com os espaçamentos dos slides e o tamanho deles.

Esse código aqui:

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Já está fazendo o papel de automatizar o tamanho das imagens, dessa forma elas não irão se sobrepor.

Ademais, se você precisar mudar o espaçamento dela e o número de imagens nos slides, é só alterar os valores de "spaceBetween" e "slidesPerView" nesse código abaixo, ah e se quiser um efeito de loop no carrossel, para que quando chegar na última imagem apareça a primeira adicione isso: "loop: true":

<script> const swiper = new Swiper('.swiper', {
        spaceBetween: 10, // esse
        slidesPerView: 3, // e esse outro
        pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        loop: true // esse aqui é o que você pode adicionar se quiser
      });
    </script>

Agora se você estiver tentando aumentar as imagem para além do normal como por exemplo, algo assim:

.swiper-slide img {
    width: 150%;
    height: 100%;
    object-fit: cover;
}

Ai nesse caso eu recomendo deixar a altura da imagem como automática e aumentar o espaçamento dos slides. Eu testei aqui alguns valores, mas por exemplo, se o width configurado for de 150% aí o numero no spaceBetween deve ser de 100, isso com um numero de 3 slidesPerView na tag de <script>. Assim:

CSS:

.swiper-slide img {
    width: 150%;
    height: auto;
    object-fit: cover;
}

HTML/JS:

<script> const swiper = new Swiper('.swiper', {
        spaceBetween: 100, // aqui o valor que deve ser alterado
        slidesPerView: 3,
        pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        loop: true
      });
    </script>

Daí pra frente é ajustar os valores, quanto maior a imagem maior o espaçamento usado, se tiver mais slidesPerView o espaçamento pode diminuir mesmo com a imagem grande além do normal. Mas os valores você vai precisar testar para ver qual fica melhor pra ti.

Era isso!

Se tiver dúvidas, e/ou precisar de mais algo, é só falar que eu estarei por aqui para ajudar com o que precisar.

Abraços e bons estudos.

Caso este post tenha lhe ajudado, por favor marque ele como solução! ✓