Custom Slider with Arrows in each Slide?

Hi all, can someone walk with me through my thought process here and tell me if this might work or if there’s a better alternative:

First of all, the topic at hand: I have the following “slider”:

Each slide has two arrows, and there are 4 Slides in total: Green Pink White Black

If we press the left arrow on the pink slide, the white block will take its place:
Pink White Black Green

And if you press the left arrow on the white model:
White Black Green Pink

I’m thinking about using an animation to move the images when you click the arrows, but the problem is that you can only use one click or two clicks animations.

You can’t press the pink left arrow twice to go from:
Green Pink White Black → Pink White Black Green → White Black Green Pink

As you can only use the mouse press once or twice.

Any ideas on how to build this in Webflow?