How to create a carousel ad?


#1

CloudApp
Hello guys,

what’s the best technique to create a carousel ad?
First I though of the MOVE-action, but I would need to add a “snap to grid” action as well.
I can’t think of suitable search words to find similar approaches.

Thanks for helping me out!


#2

Hi @gegenwind,

you’re on the right track with the move-interaction. You can build your “snap to grid”-action by yourself if you define the x-value where it should be snapped to. I’ve tried to rebuild your scenario. The RP-file uses 2 global variables. One to check which card is shown and to calculate to which x-value it should be snapped.
The main interaction is on the second dynamic panel called swipable content.

mobile_carousel.rp (93.1 KB)

To be honest, this prototype seems to be more like a hack. Maybe there is some smarter solution by someone else?


#3

You might want to look at this first…

http://shouldiuseacarousel.com


#4

I would have never been able to create this!
Thanks sooo much!

There is another feature I would like to add.
I would like to trigger an action once a card is visible to the user.
How do I detect which part is visible to the user?

@JoelCran4D
Good point! The hidden objects are additional information for very interested users.
I do not hide high-hierachy content there.


#5

Hi @gegenwind,

that’s already built in the file above.
The global variable CardInView counts which card is currently visible. On every swipe the variable will be increased / decreased by 1.
If you would like to trigger an event on one specific card, you could set a condition like "if value of CardInView equals “3"”

If you like to fire the action right after the DragDrop you could expand your interaction like this:

Again, not sure if this is best practice, but it works. :smiley:

@JoelCran4d, generally you’re right with your advice. But especially on mobile where users are used to swipe all the time, carousels seem to be a legit pattern to deal with the small screen estate. IF your’re not hiding important information, have a strong visual clue that there is more information on swipe and offer a swipe functionality.


#6

You can’t imagine how happy you made me today! You made my day! Thanks so much!