[Dúvida] Problema nuso do Swiperjs | HTML e CSS: responsividade com mobile-first

Estou desenvolvendo um projeto acadêmico que consiste na criação de um site dedicado a avaliações de filmes, livros e restaurantes. Ao longo do curso, me familiarizei com a biblioteca SwiperJS e decidi incorporá-la ao meu projeto. No entanto, estou enfrentando algumas dificuldades na configuração do carrossel. Embora o carrossel esteja funcionando, percebe-se que as imagens estão sendo exibidas com dimensões maiores do que o desejado. Gostaria de saber como posso corrigir esse problema.

Imagem:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Codigo:

<div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <button><img src="img/capitao-america.jpg" /></button>
            </div>
            <div class="swiper-slide">
                <button><img src="img/homem-de-ferro.jpg" /></button>
            </div>
            <div class="swiper-slide">
                <button><img src="img/hulk.jpg" /></button>
            </div>
            <div class="swiper-slide">
                <button><img src="img/vingadores.jpg" /></button>
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>


    <script
        src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>

    <script>
        var swiper = new Swiper(".mySwiper", {
            effect : "coverflow",
            grabCursor : true,
            centeredSlides : true,
            slidesPerView : "auto",
            coverflowEffect : {
                rotate : 50,
                stretch : 0,
                depth : 100,
                modifier : 1,
                slideShadows : true,
            },
            pagination : {
                el : ".swiper-pagination",
            },
        });
    </script>

CSS:

html,
    body {
      position: relative;
      height: 100%;
    }
    
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }
    
    button {
        cursor: pointer;
    }
    
    .swiper {
      width: 100%;
      padding-top: 50px;
      padding-bottom: 50px;
    }

    .swiper-slide {
      background-position: center;
      background-size: cover;
      width: 300px;
      height: 300px;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
    }

O codigo css e js foi retirado da propria biblioteca js

Oi!

Tudo bem?

O problema que você está enfrentando, onde as imagens estão sendo exibidas com dimensões maiores do que o desejado no carrossel, pode ser resolvido com algumas modificações no seu código. Vamos analisar as soluções:

Definir as Dimensões do Carrossel:

No seu código CSS, você já definiu o tamanho das imagens no .swiper-slide, mas é importante garantir que o carrossel também esteja com as dimensões corretas. O tamanho do carrossel deve ser definido na classe .swiper para que ele possa envolver as imagens corretamente. Você pode fazer isso da seguinte forma:
```
.swiper {
  width: 100%;
  height: 300px; /* Altura desejada para o carrossel */
}
```
Certifique-se de ajustar a altura conforme necessário.
Tamanho das Imagens:

As imagens dentro dos slides do carrossel devem estar ajustadas ao tamanho desejado. No seu código, você já definiu a largura das imagens como 100%, o que é correto. Certifique-se de que as imagens originais não sejam muito grandes, pois isso pode causar problemas de exibição. Você pode redimensionar as imagens usando um software de edição de imagem ou especificar a largura diretamente no HTML se necessário.
```
<div class="swiper-slide">
    <button><img src="img/capitao-america.jpg" style="width: 100%;" /></button>
</div>
```
Configurações do Swiper:

As configurações do Swiper também são importantes para garantir que o carrossel se comporte da maneira desejada. No seu código JavaScript, você está usando a configuração slidesPerView: "auto", que é uma boa escolha para exibir automaticamente o número certo de slides com base no tamanho da janela. No entanto, você pode ajustar a configuração spaceBetween para controlar o espaço entre os slides. Por exemplo:
```
var swiper = new Swiper(".mySwiper", {
    effect: "coverflow",
    grabCursor: true,
    centeredSlides: true,
    slidesPerView: "auto",
    coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true,
    },
    pagination: {
        el: ".swiper-pagination",
    },
    spaceBetween: 10, // Ajuste o valor conforme necessário
});
```
Isso ajudará a controlar o espaço entre os slides, o que pode influenciar a aparência das imagens no carrossel.
Imagens de Fundo:

No seu CSS, você definiu o tamanho das imagens no .swiper-slide. No entanto, o SwiperJS geralmente funciona melhor quando você usa as imagens como fundo do slide e não como elementos de imagem dentro do botão. Para fazer isso, você pode definir as imagens como fundo nas classes .swiper-slide, por exemplo:
```
.swiper-slide {
    background-image: url('img/capitao-america.jpg');
    background-position: center;
    background-size: cover;
    width: 300px;
    height: 300px;
}
```
E no HTML, você pode remover a tag <img> do botão:
```
<div class="swiper-slide">
    <button></button>
</div>
```
Esta abordagem pode ajudar a evitar problemas de dimensionamento das imagens.

Certificando-se de que esses quatro pontos estão configurados corretamente no seu projeto, você deve conseguir resolver o problema de dimensionamento das imagens no carrossel do SwiperJS.

**Lembre-se de ajustar os valores de altura, largura, espaço entre slides e outras configurações de acordo com as necessidades específicas do seu projeto. **

Mergulhe em programação