My issue relates to using swiperJS with multiple images, as I'm struggling to make it take the full width and height of the containing div. Despite applying styling like this to my images:
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}It seems that only the width is being considered, not the height.
I suspect that something within swiper is causing this resizing behavior, but the documentation only mentions autoHeight.
Here's how a snippet of my code looks:
const swiper = new Swiper('.swiper-container', {
autoHeight: true,
loop: true,
effect: "fade",
autoplay: {
delay: 2500,
disableOnInteraction: true,
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
}).container {
max-width: 1100px;
margin: 0 auto;
padding: 10px 40px;
}
.slider-wrapper {
display: flex;
margin-bottom: 50px;
}
.slider-container {
width: 40%;
}
.swiper-container {
width: 100%;
}
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.slider-content {
width: 60%;
padding-left: 40px;
}
.slider-content h3 {
font-size: 1.8rem;
}
.slider-content p {
font-weight: 200;
margin: 20px 0;
}
.slider-content p:nth-of-type(3) {
margin-bottom: 40px;
}
.slider-content strong {
font-weight: 400;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://unpkg.com/swiper/swiper-bundle.min.css"
/>
<title>Document</title>
</head>
<body>
<section id="slider">
<div class="container">
<div class="slider-wrapper">
<div class="slider-container">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img
src="https://images.unsplash.com/photo-1625523214628-4dec27885b68?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1951&q=80"
alt=""
/>
</div>
<div class="swiper-slide">
<img
src="https://images.unsplash.com/photo-1625628748830-639e59adbcfc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1951&q=80"
alt=""
/>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<div class="slider-content">
<h3>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id,
cupiditate.
</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit hic
consequuntur odio tempore? Saepe, tenetur suscipit perspiciatis
totam accusamus numquam pariatur nobis expedita in, neque,
veritatis deserunt reiciendis id excepturi?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit hic
consequuntur odio tempore? Saepe, tenetur suscipit perspiciatis
totam accusamus numquam pariatur nobis expedita in, neque,
veritatis deserunt reiciendis id excepturi?
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus
quam ducimus accusantium possimus, nihil exercitationem temporibus
recusandae soluta quae voluptatibus.
</p>
<a class="btn" href="https://www.google.com">How it Works</a>
</div>
</div>
</div>
</section>
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</body>
</html>