This is a rough idea, but it might work.

I would suggest creating a CardComponent and have them stack on each other, with the last one at the bottom.

return (
   <div className="card-container">
       {
            this.state.cards.map((card, index)=>{
                 return (<CardComponent key={card.id} details={card}></CardComponent>)
            })
       }
   </div>

)

Something like that.

Then in the CSS part, set .card-container to be a holder, and then use the order of the elements of CardComponent which would return <div>stuff here</div>.

Then set .CardComponent > div to position things absolute and then take advantage of the z-index property.

Use this code for whenever you want to remove the first card and append a new card to the end (at the bottom of the card stack).

var count = 0;
// Reverse the array, so you can order from bottom to front
$('.card-container > div').reverse().each(
    function() {
        $(this).css('z-index', ++count);
    }
);

Then you can update the cards state.

let newCardList = this.state.slice(1);
let newCard = null; // Add the new card here
newCardList.append(newCard);
this.setState({
    ...this.state,
     cards: newCardList
})

So on the swipe event on said CardComponent, just get the key from the event, play a slide animation using jQuery, and after the animation ends, just slice the cards array like in the above code.

Also you will need to call this, after you slice, and add a new card.

$('.card-container > div').reverse().each(

I'm assuming you work on a web browser app mainly for computer users.

• for animations you can just decompose the move in a couple frames,
• for the swipe you can go with custom event functions if you can't find anything existing,
• the stack of card is a simple state management and I recommend using hooks.