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.
Link to demo page :
https://demo-add-list-date-range.bubbleapps.io/version-test/swipe_element