Entrar Ainda não tem acesso?
2
respostas

[Dúvida] Imagens não ficam do tamanho correto no Slide

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Integrando o Carrossel com SwiperJS e atividade Carrossel com SwiperJS

por Ygor Neres Cortês
| 60.4k xp | 5 posts

Olá!

Eu tava fazendo essa parte do projeto aqui, mas as imagens, mesmo após tentar colocar o width em 100%, continuam dando problema. Por exemplo, se eu colocar width: 35vw; até que o tamanho fica legal, mas como resultado, 1 imagem fica sendo cortada não permitindo visualizar a mesma no campo da tela, como no print a seguir:

A última imagem do slide não fica dentro da tela, sendo obrigado a puxar mais o slide até que a mesma entre no vwJá no caso de definir o width em 100%, a imagem fica minúscula, como no print abaixo:

Propriedade width: 100%;Obviamente já tentei colocar 200% ou outros valores, mas se eu aumentar muito, as imagens tbm crescem em relação ao height, coisa que eu não queria que acontecesse ;-;, se alguém puder me ajudar hehe

2 respostas
por Ygor Neres Cortês
| 60.4k xp | 5 posts

Meu HTML

Logo da Alurabooks 
    <div class="container">
        <a href="#"><img src="./assets/Favoritos.svg" alt="Meus Favoritos" class="container__imagem"></a>
        <a href="#"><img src="./assets/Sacola.svg" alt="Carrinho de Compras" class="container__imagem"></a>
        <a href="#"><img src="./assets/Usuario.svg" alt="Meu Perfil" class="container__imagem"></a>
    </div>
</header>

<section class="banner">
    <h2 class="banner__titulo">Já sabe por onde começar?</h2>
    <p class="banner__texto">Encontre em nossa estante o que precisa para seu desenvolvimento!</p>
    <input type="search" class="banner__pesquisa" placeholder="Qual será sua próxima leitura?">
</section>

<section class="carrossel">

    <h2 class="carrossel__titulo">Novos lançamentos</h2>

    <div class="swiper">

        <div class="swiper-pagination"></div>

        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="./assets/Nodejs.svg" alt="Slide 1"></div>
            <div class="swiper-slide"><img src="./assets/Guia Front-end.svg" alt="Slide 2"></div>
            <div class="swiper-slide"><img src="./assets/Arquitetura.svg" alt="Slide 3"></div>
            <div class="swiper-slide"><img src="./assets/ReactNative.svg" alt="Slide 4"></div>
            <div class="swiper-slide"><img src="./assets/Tuning.svg" alt="Slide 5"></div>

        </div>

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

<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<script>
    const swiper = new Swiper('.swiper', {

        spaceBetween: 100,
        slidesPerView: 3,
        pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
        },
        autoplay: {
            delay: 3000,
        },
    });
</script>

Print do CSS do carrossel

Print do carrossel.css

por Lorena Garcia
| 8924.9k xp | 13324 posts
Alura Scuba Team Suporte Educacional

Oi Ygor, tudo bem?

Você poderia mandar seu código completo aqui, está faltando o começo do HTML? Você pode usar a ferramenta de inserir bloco de código </>. Com print é ruim porque não conseguimos copiar seu código para fazer testes.

Caso haja alguma dúvida de como fazer, você pode assistir esse alura+ sobre como turbinar seus estudos com o fórum.

Um abraço e bons estudos.