How to customize cards effect on swiper?

Question

This is the default slider https://codesandbox.io/s/4gx6ho?file=/src/app/app.component.ts

Is there a way to reduce the transformation parameters so that the cards that are behind or already swiped have a reduced angle of inclination? Looked for a solution in the documentation, but there doesn't seem to be a way to set this up. Please give me some idea on how to solve this problem.

Answer 1

I know this is old, but I found your question looking for another solution.

Swiper cards have the cardsEffect options, you can read more about it here: https://swiperjs.com/swiper-api#cards-effect-parameters

And this is an example code of how to use it:

const el = document.querySelector('.swiper-container');

new Swiper(el, {
  effect: 'cards',
  cardsEffect: {
    perSlideOffset: 20, // Space between cards in px
    perSlideRotate: 1, // Rotation of cards in degrees
  },
});

Hope it helps to someone who is looking for this.