[WORKING] Swipe tabs and cards beneath simultaneously

Idea Implemented
1

UPDATE: This is now responsive

There are TWO options both work with touch on a mobile and with the mouse/trackpad on a desktop/laptop and require no paid plugins - totally FREE solution.

  1. Option 1 allows a user to swipe the card left or right and the tabs move accordingly. The tabs section is simply a horizontal scrolling RG so it moves very fast on swipe and does not select the next card but you can tap a button to get the card.

  2. Option 2 allows the user to swipe either the card, or the tabs, left or right and they both move one step at a time. This seems more intuitive and operates like other mobile swipes I’ve used.

It bubble’s own, free, Draggable Elements plugin and ZeroQode’s free CSS Tools. The CSS Tools plugin is used to hide the scroll bar on the RG of tabs (not hidden on FireFox). The Draggable elements are used to allow the user to swipe the cards and the tabs.

This widget reads its tabs from a db table so you can have as many, or as few, tabs as you wish, dynamically. I have only set up 12 buttons (100 px each) which covers a standard 1200px screen but if you want more buttons or smaller buttons it should be easy to change.

20
20624×894 76.6 KB

OPTION ONE
The editor view is at: swipe-to-del | Bubble Editor

The live view is at: https://swipe-to-del.bubbleapps.io/version-test/card_tab_swipe

OPTION TWO
The editor view is at: swipe-to-del | Bubble Editor

The live view is at: https://swipe-to-del.bubbleapps.io/version-test/card_tab_swipe_both

I believe an enhanced version can be built using ZeroQode’s Touch and Mouse Events Detection plugin which I plan to attempt as soon as I have time.

Hope this helps somebody.

11 Likes
2

It does! Thank you.

3

I’m working on taking it a step further @scottb50 - I want the tabs to swipe left/right one step at a time, the same way as the card below. I hope to have it ready for tomorrow. I’ll ping you here when I post it and you can check if you prefer that UI. I want this approach because on a mobile horizontal RGs are too ‘loose’ and float along very fast.

1 Like
4

The new enhanced version of this feature/widget is now available at the links in the main post.

5

It looks great…and I’m much smarter about fruit!

1 Like
6

It’s only aout fruit @scottb50 because I’m on a diet and can’t eat it so I’m thinking of nothing else :kiwi_fruit::apple::pineapple::grapes:

1 Like
7

This is exactly what I need.

1 Like
8

Love your icon and glad to be of help @InCommon

9

I did a swipe action with two drop areas, and two different drag/drop groups that are contained in a repeating group.

The use case was for a chat application and the ability to slide left to view edit buttons or to slide right to close edit buttons and revert to original view of the conversation details.

Below is a post I showed some screen shots of the set up.

Drag and Drop for Swipe

In the post I also am seeking help on a few issues, specifically moving an element back to its original position so I can make the swipe more fluid.

I imagine this could be used to slide left or right on photos as a slide show if you use a repeating group set to 1 cell and create a workflow that on drop in drop area that the repeating group next or previous entry is displayed.

Any help or ideas would be very welcome on how to make the swipe better.

Cheers