CODEWITHSUNDEEP
javascriptcsscarouselswiper.js
Mark A
Mark A

Reputation: 61

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

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

Upvotes: 6

Views: 21527

Answers (3)

afrooz
afrooz

Reputation: 1

I solved this problem

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

Upvotes: 0

Sqweelow
Sqweelow

Reputation: 327

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!

Upvotes: 14

Noname
Noname

Reputation: 185

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

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

Upvotes: 2

Related Questions