Not smooth transition after the last slide in Swiper loop mode

1
votes

I am trying to set a smooth transition for internal content when swiping (transform: scale). I added the required css rule. This works, but after switching the last slide, there is an abrupt scale change. (not smoothly).

In the source code of the library in the file swiper/src/core/loop/loopFix.js I found line number 28: const slideChanged = swiper.slideTo(newIndex, 0, false, true); From this, I realized that the looping of the slides occurs according to the following principle: after the last slide, we instantly switch to the previous one (speed = 0) and an animation is produced that shows that we have passed the circle.

My code example: https://stackblitz.com/edit/swiper-demo-9-vertical-slider-x3g4my

Steps to reproduce the problem:

  1. Swipe two slides down
  2. Swipe a third time down and notice the sudden change in scale

Is there any way to fix this problem?

1
javascriptswiper

1 Answers

0
votes

I had a similar issue with Swiper when looping the slide items and doing transitions/transforms on the active slide.

I found that I could add .swiper-slide-duplicate-active as well. I tried updating your demo and if seems the following change makes the transition smooth.

.swiper-slide .content {
  transform: scale(0.5);
}

.swiper-slide-active .content,
.swiper-slide-duplicate-active .content {
  transform: scale(1);
}