Ao tentar reproduzir o carrossel em um outro projeto, acabou que as imagens começaram a ficar uma sob as outras, como poderia corrigir?
Solucionado
Ao tentar reproduzir o carrossel em um outro projeto, acabou que as imagens começaram a ficar uma sob as outras, como poderia corrigir?
Em modo navegador ele abre como esperado, mas em outros dispositivos não.
Oi, Adao, tudo bem?
Para que eu possa simular o seu problema e te ajudar de forma mais assertiva, peço que você compartilhe o link do seu projeto no GitHub ou um drive com todos os arquivos utilizados no projeto.
Fico no aguardo!
Oi, Adao,
Muito obrigado por compartilhar o seu código no GitHub. O problema que você estava enfrentando ocorre , pois na classe swiper-slide é preciso definir o filho dessa classe que são as tags <img>. Sem isso os estilos não são aplicados diretamente nas imagens, mas sim na <div> que contém a classe swiper-slide.
Podemos corrigir esse problema adicionando no arquivo "style.css" na classe swiper-slide a tag <img> na sequência da classe para especificar que os estilos devem ser aplicados nas imagens. Além disso, precisamos definir o tamanho das imagens como 100%, utilizando a propriedade width e remover do documento HTML os estilos colocados nas tags <img>que fazem parte do carrossel. Ficaria assim:
.swiper-slide img {
max-height:100%;
width:100%;
}<div class="swiper-wrapper">
<div class="swiper-slide"><img src="assets/casal.png" alt="Geovane e Taina segurando o doguinho"></div>
<div class="swiper-slide"><img src="assets/casal3.png" alt="Casal de mãos dada "/></div>
<div class="swiper-slide"><img src="assets/casalfinal.png" alt="casal vestidos elegantemente"></div>
<div class="swiper-slide"><img src="assets/doguis.png" alt="Os doguinhos da familia sorrindo para foto"></div>
<div class="swiper-slide"><img src="assets/quaseCasando.png" alt="vestidos de gala"></div>
<div class="swiper-slide"><img src="assets/casal na natureza.png" alt="Casal na natureza"></div>
<div class="swiper-slide"><img src="assets/casal sorrindo juntos.png" alt="Casal sorrindo juntos"></div>
<div class="swiper-slide"><img src="assets/geovane apaixonado.png" alt="Geovane olhando apaixonado"></div>
</div>Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!
Opa, funcionou mesmo. Obrigado Rodrigo!