How to change the Swiper height or slide width in React JS without using fixed CSS

Question

I have a card game where the player selects a card from one deck to add to a second. Pushing the button on the active card will move it to the other deck and then make it active. The active deck should be larger when in focus, while the inactive is minimized like so:

I have implemented it using the Swiper Coverflow effect in both SwiperJS and React-Swiper, but in either case the height is tied to the .swiper-slide CSS class. The width on this class is set to a fixed size which drives how the rest of the Swiper is rendered. It seems that the only way to change the slide width (and resulting Swiper height) is to apply fixed width classes to the slide based on state.

JSX:

 <SwiperSlide
            key={index}
            className={
              props.selected
                ? "swiper-fixed-width-300 "
                : "swiper-fixed-width-100 "
            }
          >

CSS:

.swiper-fixed-width-100 {
  width: 100px;
}

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

However this approach has no easing or transition like other interactions so it feels too abrupt. I would like to find a way to do the same using the Swiper API functions. How can this same interaction be achieved with the API or without manipulating the CSS class?

Example Sandbox

Treachery

Did you add autoHeight property and set it to true? – Tabber

@MuhammadAli yes, I have autoHeight set to true which adjusts the Swiper height, but the slides are the same size and are then cut off. I found that also setting the height property will help it reset after a resize, but I have to set the fixed width CSS. If I remove the fixed-width CSS class it breaks the Swiper coverflow effect. – Treachery

Answer 1

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.

Leeward

Answer 2

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

Wellstacked