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. 🚀