score:1

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):

<div
    className={
        props.selected 
        ? "Deck Deck-selected" 
        : "Deck Deck-unselected"
    }
>

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

CSS:

.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.

score:-1

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.

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()#examples

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

Here is a blog post from thoughtbot.com that dives into using scale() and CSS transitions: https://thoughtbot.com/blog/transitions-and-transforms


Related Query

More Query from same tag