width: 100%;

Olá Jeferson!

Quando você define a largura de uma imagem como 100%, isso faz com que a imagem ocupe 100% da largura do seu contêiner pai. No caso do Swiper, cada imagem está dentro de um slide (swiper-slide), que por sua vez é um contêiner.

Cada swiper-slide tem uma largura definida pelo SwiperJS, que é calculada com base na configuração slidesPerView. Se você definiu slidesPerView: 3, o Swiper ajusta a largura de cada slide para que três slides caibam na tela ao mesmo tempo.

Quando você define width: 100% para a imagem, ela se ajusta para ocupar toda a largura do seu contêiner pai (swiper-slide). Isso significa que a imagem se redimensiona para caber exatamente dentro do slide, sem ultrapassar os limites.

Por exemplo, se o contêiner swiper-slide tiver 300px de largura, a imagem também terá 300px de largura, mantendo a proporção e ajustando-se ao tamanho do contêiner.

Portanto, ao definir width: 100% para as imagens, garante-se que elas se ajustem ao tamanho do slide, permitindo a exibição de várias imagens (slides) lado a lado, conforme configurado no SwiperJS. Resumindo, ao usar 100%, a imagem se ajustará, independentemente de estar ocupando 50% ou 200% do espaço anteriormente.

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Muito obrigado. Ótima explicação!