Demo to preview the plugin:
🔗 Live Demo: https://custom-swiper.bubbleapps.io/version-test
🔗 Bubble Editor: https://bubble.io/page?&name=version-test&id=custom-swiper
Introduction
Transform any repeating group into a sleek looking swiper, slider or
carousel.
How to setup
Vertical Swiper
Horizontal Swiper
Old Responsive
Plugin Element Properties
Swiper
Fields:
Title | Description | Type |
HTML ID | The HTML ID of the repeating group that you want to transform into
the swiper.. | Text |
🫑 Content | ||
🍥 Configuration | ||
Direction | Set the direction of the swiper. Available options: Horizontal,
Vertical | Dropdown |
Slides Per View | Determines how many slides should be shown at once. Resizes
automatically. | Number |
Slides Spacing | Defines the spacing between the slides in pixels. Defaults to
0. | Number |
Initial Slide | Sets the index of the initially visible slide. Defaults to 1. | Number |
Loop | Enables or disables loop functionality of the slider. | Checkbox (yes/no) |
🍭 Styling | ||
Animation Type | What kind of animation to use when swiping between slides. Available
options: Default, Zoom, Fader, Auto move, Auto switch | Dropdown |
Duration | Animation duration for Fader, Auto move and Auto Switch. | Number |
Mode | Sets the animation that is applied after a drag ends. Available
options: Snap, Free, Free-snap | Dropdown |
Element Actions
- Next - Changes the currently active slide to the next if it exists.
- Previous - Changes the currently active slide to the previous if it exists.
- Move To - Changes the active slide to a specific index.
Title | Description | Type |
Index | What index to move the slider to. | Number |
Exposed states
Title | Description | Type |
Current Index | The index of the currently active slide. | Number |
Total Count | The total amount of slides. | Number |
Previous is Allowed | True if you are allowed to move to a previous slide. | Checkbox (yes/no) |
Next is Allowed | True if you are allowed to move to a next slide. | Checkbox (yes/no) |
Element Events
Title | Description |
changed | Fires whenever the active or most visible slide has changed. |
Workflow example
Workflow example - is part for the plugin documentation which shows a
couple (3-4 workflows) workflow steps Events and Actions (if available)
for basic setup how to start with the plugin with a description.
If a plugin is an API with authorization, we’ll show the steps on how
to authorize workflow with a basic setup and describe it. If a plugin is
a visual element and/or has actions/events we’ll show how to start and
work with it.
Changelogs
Update: 26.02.24 - Version 1.4.0
- Added animations and minor fixes
Update: 17.02.24 - Version 1.3.0
- minor update
Update: 12.02.24 - Version 1.2.0
- updated description
Update: 13.11.23 - Version 1.1.4
- update v4
Update: 11.08.23 - Version 1.1.3
- Name change
Update: 19.05.23 - Version 1.1.2
- Fix errors when updating track details
Update: 18.05.23 - Version 1.1.1
- Remove verbose
Update: 18.05.23 - Version 1.1.0
- Ignore cached slides
Update: 17.05.23 - Version 1.0.8
- Add next and prev states
Update: 17.05.23 - Version 1.0.7
- Fix inital slide number
Update: 17.05.23 - Version 1.0.6
- Add change event when slide changes
Update: 16.04.23 - Version 1.0.5
- update element name
Update: 16.04.23 - Version 1.0.4
- bug fixes and performance improvements
Update: 30.03.23 - Version 1.0.3
- Updated Service URL
Update: 30.03.23 - Version 1.0.2
- Updated instructions
Update: 02.03.23 - Version 1.0.1
- fix bug related to initialization of the swiper
Update: 29.12.22 - Version 1.0.0
- initial release
Update: 21.12.22 - Version 0.0.1
- init