Responsive Image Slider with Autoplay | HTML CSS Swiper JS

[@prakhar3230]

i made this slider but when i increase width of the active slide. it is not centered. i tried using transform scale. i tried using margin on the active slide to center it. i tried using custom functions to center it . but it didnt work. i saw some pages which mention that size increase on slides doesnt work. but those problems were close due to inactivity . i saw some codepen solutions they did work but they looked to complex for me to understand. do you have any solution for this? i dont know what to do.

[@ecemgokdogan]

Actually, Swiper JS is designed to handle slides of the same size so when you increase the size of an active slide, it may not be centered automatically. I usually adjust it by trying. In this project, when I set the width of the active slide from "300px" to "400px", it was not centered exactly as you said. It works a little if you set "freemode" to "true" in Javascript. Btw, freemode provides slides with a more fluid and natural scrolling experience. I have a project about swiper freemode, I'll upload it soon after developing it a bit.

[@prakhar3230]

@@ecemgokdogan so i was trying to center the active slide using some stuff. i tried slidesOffsetBefore and After it was partially working. you can try this. and then i did document.addEventListener("DOMContentLoaded", () => {
let swiper;
setTimeout(() => {
swiper = new Swiper(".swiper", {
grabCursor: true,
initialSlide: 4,
centeredSlides: true,
spaceBetween: 45,
freeMode: false,
loop: true,
slidesPerView: "auto",
slideToClickedSlide: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
});
function adjustWrapperSpacing(direction) {
const wrapper = document.querySelector(".swiper-wrapper");
if (direction === "next") {
wrapper.style.marginRight = "80px";
wrapper.style.marginLeft = "20px";
} else if (direction === "prev") {
wrapper.style.marginLeft = "-20px";
wrapper.style.marginRight = "0px";
}
}
document
.querySelector(".swiper-button-next")
.addEventListener("click", () => {
adjustWrapperSpacing("next");
});
document
.querySelector(".swiper-button-prev")
.addEventListener("click", () => {
adjustWrapperSpacing("prev");
});
swiper.on("slideChange", () => {
const direction =
swiper.previousIndex < swiper.activeIndex ? "next" : "prev";
adjustWrapperSpacing(direction);
});
}, 100);
});
you can adjust the margin values to manually center the slides it works for me. the only drawback i found is that it wouldnt work for the initial load. i am thinking of leaving it like that or just switching to second slide as soon as it loads. i will try to make the transition a bit smooth as well. hope it works for you.

[@ecemgokdogan]

@@prakhar3230 Your solution works. I think, in such cases, manually adjusting margin values ​​is a wise method. 🚀