DEMO EDITOR:
https://bubble.io/page?id=urion-plugins&tab=Design&name=carousel&type=page
🚀 Installation & Setup
Install the Plugin:
- In Bubble’s Plugins tab, click Add plugins and install Infinite Image Carousel.
- Place the Element: Under Design → Visual elements, drag Infinite Image Carousel onto your page.
- Bind Your Data: Image URLs: Set image_urls_list to your list of image URLs.
- Image Links (optional): Set image_links_list to matching link URLs.
Configure Styling & Behavior
- Height & Spacing: Adjust image_height_number and image_spacing_number.
- Background: Choose background_color_text.
- Object-Fit: Pick logo_fit_option.
- Speed & Direction: Set carousel_speed_number and slide_direction_option.
- Pause Options: Toggle pause_on_hover_boolean and/or pause_on_click_boolean.
- Corners & Shadow: Customize border_radius_number, shadow_blur_number, shadow_opacity_number, and shadow_color_text.
- Preview: Click Preview—the carousel will automatically build inside the plugin element, with no extra HTML or IDs needed.
🧩 How It Works
- Initialize: Creates a container & track under Bubble’s built-in instance.canvas.
- Starts a JS requestAnimationFrame loop for continuous motion.
Update
- Parses your dynamic lists.
- Applies responsive sizing, styling, and shadow.
- Rebuilds two back-to-back sets of images.
- Computes motion parameters (pixels/second, wrap width).
- Wires pause-on-hover/click behavior.