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! ✓