How to enable center slides only for middle slides in Swiper JS?

user_10577934 0
Viewed 4590

Working with Swiper JS for a slider and want to enable center slides only for the middle slides and not the first and last slides. Is there an easy and configurable way to specify the index of the centered slides in the following?

 var swiper = new Swiper('.my-swiper-section', {
    slidesPerView: auto,
    spaceBetween: 1
  });

I came up with the following, but it is now working 100% correctly:

 swiper.on('slideChangeTransitionStart', function () {
      if (swiper.isBeginning || swiper.isEnd) {
           swiper.params.centeredSlides = false;
      }
      else {
           swiper.params.centeredSlides = true;
      }
      swiper.update();
 });
carousel swiper.js css javascript
2 Answers

Just found the real solution!

You need to add 2 params to your Swiper.

{
   centeredSlides: true,
   centeredSlidesBounds: true
}

Hope it will help someone in the future!

user_51458020

I think solution is adding parameter "initialSlide". Example:

 var swiper = new Swiper('.my-swiper-section', {
    slidesPerView: auto,
    spaceBetween: 1,
    initialSlide: 3,
  });
user_104549380
Related