Is it possible to use CSS transforms to scale swiper-slide items in the following way…

[marcamos]

Is it possible, using the existing classnames (or, anything built into Swiper) to write CSS that does the following?

1. Active slide transitions out by scaling up a bit (via transform: scale(1); to transform: scale(1.4);
2. The incoming slide transitions in by also scaling up a bit, but via transform: scale(0.6); to transform: scale(1);

I tried doing so using existing classnames (.swiper-slide-prev, .swiper-slide-active, and .swiper-slide-next), but I couldn't achieve the effect I was going for.

For a visual demonstration of what I'm trying to achieve, watch (only) the bottle in this video: https://cdn.dribbble.com/users/259660/screenshots/15292175/media/24fae2d1bf063bbbf1d169c29a1e0424.mp4

[nolimits4web]

Coverflow effect can do that https://swiperjs.com/swiper-api#coverflow-effect

[nolimits4web]

Or fade effect and do scaling of not slides but inner elements

[marcamos]

I've tried to do it using the fade effect and I can get half of my desired effects to work (1, the "fade-out-larger" effect), but I can't figure out how to get 2, "fade-in-smaller-to-full-size" effect.

The behavior of the bottle, in my linked-to video, is exactly what I'm aiming for … but am too new to Swiper to know how to manipulate it.

You mentioned the Coverflow effect … does that get me closer to emulating what the bottle is doing in the linked-to video?

[marcamos]

For anyone following along, I figured out how to achieve my goal. Rather than rely on Swiper's classes, I simply did this:

• Used Swiper's fade effect
• Set the speed to 0 (so that the next slide appears immediately)
• Used CSS keyframes to handle the transition in and out
• Ensured that the Swiper delay and the CSS keyframes animation length were exactly the same