Hello everyone !
Labastide.io is happy to introduce you a brand new paid plugin !
You can now use the swipe on mobile !
note : if you try to use/test it in desktop mode , it might not work as you expected. Turn you app into mobile view with the browser inspector to try it !
How does it works ?
Adding a Swipe Element to the Page
Add the Element to Swipe:
Simply place the element you want to swipe on your page.
Choose an ID Attribute:
Assign a unique ID to the element you want to swipe so that the plugin can identify it.
Available Configurations:
Detection of Passing:
Configure the criteria to detect if the swiped element has passed a specific reference element.
You can choose to detect when the swiped element passes the reference element either at the first pixel or completely.
Swipe Direction:
Define the direction of the swipe (left, right, up, down, horizontal, vertical).
Trigger Condition:
Determine the condition that triggers the passing detection: either by going out of the screen (out_of_the_screen) or by going out of a specific element (out_of_an_element).
Trigger Point:
Specify the trigger point (first pixel or full element) to activate the passing event.
Publish on Move:
Enable publishing information during the movement to get real-time updates on the swipe position.
Receiving Information:
When the swiped element passes the reference element according to the defined criteria, events are triggered, and the corresponding information is published:
unique_id_swipe: Unique ID of the swiped element.
swipe_position: Position of the swipe (first_pixel or full_element).
swipe_direction: Direction of the swipe.
Use these events and published states to perform specific actions on your page.
- You can also detect the “swipped speed” on an element (very usefull to combine it with the “swipper” to include a fluid behavior to close en modal element for example). Simply add the swipe speed element.
Those elements are working perflectly in a repeating group . Make sur to attribute a unique id attribute to each element.
We also included a pressed watcher
Try out this plugin on the demo page :
Happy to have your feedback and questions or helping you to configure it with more example if necessary