Issue
I'm attempting to develop a new version of my website with a large picture slider, using SwiperJS. Unfortunately, I've encountered an issue while working with the images in this slider. As you can observe on this CodePen, I'm struggling to display my images side by side with only the gutter space in between. Instead, there's always a large space after each photo, highlighted with an orange background.
Here is the code snippet for the slider in my website :
var swiper = new Swiper(".mySwiper", {
slidesPerView: "auto",
spaceBetween: 30,
grabCursor: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});* {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.content {
background-color: blue;
}
.swiper {
width: 100%;
height: 94vh;
max-height: 1400px;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
background-color: orange;
}
.swiper-slide img {
display: block;
height: 100%;
}<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Photographies - Alan Renault</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href=" https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-bundle.min.css " rel="stylesheet">
</head>
<body>
<div class="content">
<!-- Slider main container -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://alanrenault.com/gallery/photographies/ALR_9386.jpg"/></div>
<div class="swiper-slide"><img src="https://alanrenault.com/gallery/photographies/ALR_8940.jpg"/></div>
<div class="swiper-slide"><img src="https://alanrenault.com/gallery/photographies/ALR_8888.jpg"/></div>
<div class="swiper-slide"><img src="https://alanrenault.com/gallery/photographies/ALR_7940.jpg"/></div>
<div class="swiper-slide"><img src="https://alanrenault.com/gallery/photographies/ALR_7317.jpg"/></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
</body>
</html>Here is the result I try to achieve : Illustration
Do you have any suggestions on how to resolve this issue?
Thank you in advance for your help.
I've tried manipulating the .swiper-slide class in the CSS, but it consistently results in a malfunctioning slider.
Solution
Play wit height, slidesPerViev, etc. and adjust how you need.
var swiper = new Swiper(".mySwiper", {
slidesPerView: "1.5",
spaceBetween: 20,
grabCursor: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});* {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.content {
background-color: white;
}
swiper {
width: 100%;
height: 60vh;
max-height: 1400px;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
}
.swiper-slide img {
display: block;
width: 100%;
height: auto;
}<link href=" https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-bundle.min.css " rel="stylesheet">
<div class="content">
<!-- Slider main container -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://alanrenault.com/gallery/photographies/ALR_9386.jpg"/></div>
<div class="swiper-slide"><img src="https://alanrenault.com/gallery/photographies/ALR_8940.jpg"/></div>
<div class="swiper-slide"><img src="https://alanrenault.com/gallery/photographies/ALR_8888.jpg"/></div>
<div class="swiper-slide"><img src="https://alanrenault.com/gallery/photographies/ALR_7940.jpg"/></div>
<div class="swiper-slide"><img src="https://alanrenault.com/gallery/photographies/ALR_7317.jpg"/></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>Answered By - Łukasz D. Mastalerz
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.