Accepted answer

I would use transform: scale(0.3) on the parent (Deck) and keep the width of the slider at 300px.

JSX (Deck.js):

        ? "Deck Deck-selected" 
        : "Deck Deck-unselected"

<SwiperSlide key={index} className="swiper-fixed-width-300">


.Deck {
  transition: transform 0.3s ease;
.Deck-selected {
  transform: scale(1);
.Deck-unselected {
  transform: scale(0.3);

.swiper-fixed-width-300 {
  width: 300px;

Here is my sandbox with the effect transitioning.


If you want to change the size of the "decks" and maintain a smooth transition effect, I am thinking you could use the scale() transform function which is also a CSS solution.

If you combine this with a CSS transition you can achieve the effect you mentioned.

Here is a blog post from that dives into using scale() and CSS transitions:

Related Query

More Query from same tag