MARKETPLACE
PLUGINS
INFINITE IMAGE CAROUSEL
Infinite Image Carousel logo

Infinite Image Carousel

Published June 2025
   •    Updated October 2025

Plugin details

This  displays any set of images in a smooth, endlessly scrolling row—no separate HTML element or manual IDs required. Everything is self-contained: just drop the element on your page, bind your image URLs (and optional links), and configure the look and behavior via properties.
✨ Key Features
- Pure JS Infinite Loop: No CSS jumps or resets—true continuous scroll.
- Slides-Per-Second Speed: Enter how many images should pass per second.
- Direction Control: Scroll left or right.
- Pause Controls: Pause on hover and/or click.
- Responsive: Automatically scales image height & spacing at mobile/tablet breakpoints.
- Styling: Background color, object-fit, dynamic border-radius, drop-shadow color/blur/opacity.
- Optional Links: Wrap images in <a> tags to make them clickable.

$19

One time

stars   •   0 ratings
0 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

Urion Systems logo
Urion Systems
Joined 2018   •   14 Plugins
View contributor profile

Instructions

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.

Types

This plugin can be found under the following types:

Categories

This plugin can be found under the following categories:
Containers   •   Media   •   Image   •   Visual Elements

Resources

Support contact
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble