<style>
.swiper-slide {
width:15%;
}
.swiper-slide-active {
width: 40%;
}
</style>
var swiper = new Swiper(".swiperEvent", {
// slidesPerView: "auto",
slidesPerView: 3,
loop: 3,
centeredSlides: true,
spaceBetween: 115,
initialSlide: 1,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
}
You can use the zoom method. Make sure your slides have a zoom container and call the method on transition.
var swiper = new Swiper(".swiperEvent", {
// slidesPerView: "auto",
slidesPerView: 3,
loop: 3,
centeredSlides: true,
spaceBetween: 115,
initialSlide: 1,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
zoom: {
maxRatio: 2,
minRatio: 1
},
});
}
swiper.zoom.in();
swiper.on("slideChangeTransitionStart", function() { swiper.zoom.out() });
swiper.on("slideChangeTransitionEnd", function() { swiper.zoom.in() });