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

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

• javascript
• css
• carousel
• swiper.js

• Hello, did you found a solution for this? I also strugling with the same problem. – hsantos Commented Aug 21, 2019 at 11:45
• I know this is an old thing, but I was having the same issues and manage to make it work but with ugly transitions. It would be nice to know what the author of the Swiper would propose as a solution. – lokarkristina Commented Dec 24, 2019 at 9:29
• No didn't find any solution yet for this! – Mark A Commented Apr 19, 2020 at 18:42

3 Answers 3

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!

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

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

I solved this problem

.swiper-slide {
  display: flex;
  justify-content: center
}