I found myself trying to figure out how to do an interface consisting of a series of cards that slide off to the side as you finish them. Let’s start by looking at the sample app before the addition of the sliding magic.
As you can see above, there are six card, a
step variable that controls which one is visible, and Next / Previous buttons change the value of the variable. Next, let’s try adding Vue transitions and a little CSS transitions fanciness.
So, now as you click Next / Previous, there is a little bit of a visual swipe animation. It isn’t clear where the user is in the process with this, so let’s add a progress bar, next.
That feels a little more complete. So, we have been doing swipe animations so far. What would it take to add the ability to swipe things from side to side using your actual finger? Let’s start with a little bit of a proof of concept.
In the above pen, as you swipe your finger across the red square, it says what you are doing on the screen. Now, let’s try to integrate this into the carousel interface.
That generally seems to work. To be honest, I’m not a huge fan of this end-result, though. I think that it can (and should) be better.
Have any suggestions? Know of some library that I missed? Please, feel free to drop a comment, below.