How to set active slide width, when slidesPerView: 3. Must be center and show 3 slides

Viewed 971
<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",
    },
  });
}
1 Answers

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() });
Related