Build an image slider in Bubble using the Slideshow element or a custom carousel with index-based custom states. This tutorial covers auto-playing image transitions, manual arrow and dot navigation, and integrating database-driven image lists for dynamic slideshows.
Overview: Image Sliders in Bubble
Image sliders (carousels) display multiple images in a rotating view. Bubble offers a built-in Slideshow element and you can also build custom carousels using index states and conditionals. This tutorial covers both approaches for landing pages, product galleries, and testimonial sections.
Prerequisites
- A Bubble account with an app
- Images uploaded to Bubble or stored as URLs in your database
- Basic understanding of custom states and conditionals
Step-by-step guide
Option A — Use the built-in Slideshow element
Option A — Use the built-in Slideshow element
Click '+' in the element palette and search for 'Slideshow.' Drag it onto your page and resize it. In the Property Editor, set the Type of content to Image (or your data type with image fields). Set the Data source to a list of images — either a static list or Do a search for your image data type. Configure autoplay interval (e.g., 5 seconds), transition style, and whether to show navigation arrows.
Expected result: A working slideshow cycles through images automatically with navigation controls.
Option B — Build a custom carousel with states
Option B — Build a custom carousel with states
Create a custom state on the page called 'current_index' (type number, default 1). Add a Group that contains an Image element. Set the Image source dynamically: Do a search for SliderImage :item # page's current_index 's image. Add Left and Right arrow buttons. Left arrow workflow: Set state current_index = current_index - 1 (Only when current_index > 1). Right arrow: Set state current_index = current_index + 1 (Only when current_index < total image count).
Expected result: A custom carousel displays one image at a time with arrow navigation.
Add dot navigation indicators
Add dot navigation indicators
Below the slider, add a Repeating Group set to display horizontally. Data source: a list of numbers from 1 to total image count (use the ListShifter or List of Numbers plugin). In each cell, add a small circle Shape. Add a conditional: When Current cell's number = page's current_index → background = active color. Click workflow: Set state current_index = Current cell's number.
Expected result: Dot indicators below the slider show the current position and allow direct navigation.
Add auto-play functionality
Add auto-play functionality
Use a 'Do every X seconds' workflow event set to 5 seconds. Action: Set state current_index = current_index + 1. Add a condition: Only when current_index < total count. When current_index reaches the last image, reset to 1 for infinite looping. Optionally pause autoplay when the user hovers over the slider using a 'hover' custom state.
Expected result: The slider automatically advances every 5 seconds and loops back to the beginning.
Connect to database for dynamic images
Connect to database for dynamic images
Create a 'SliderImage' data type with fields: image (image), caption (text), link_url (text), order (number). In the slider, set the data source to Do a search for SliderImage, sorted by order ascending. Display the caption below the image. Make the image clickable to navigate to the link_url. Admins can add, reorder, and remove slider images from the database.
Expected result: The slider displays images managed from the database, editable by admins without modifying the page.
Complete working example
1IMAGE SLIDER — SETUP SUMMARY2==============================34OPTION A — SLIDESHOW ELEMENT:5 Element: Slideshow6 Data source: Search for SliderImage sorted by order7 Autoplay: 5 seconds8 Transition: slide or fade9 Navigation: arrows + dots1011OPTION B — CUSTOM CAROUSEL:12 Custom state: current_index (number, default 1)13 Image source: SliderImage search :item # current_index1415 Left arrow: Set current_index = current_index - 116 Only when: current_index > 117 Right arrow: Set current_index = current_index + 118 Only when: current_index < total count1920 Auto-play: Do every 5 seconds → increment index21 Reset to 1 when reaching the end2223 Dots: Horizontal RG of numbers 1-N24 Active dot: conditional background color25 Click: Set current_index = this number2627DATA TYPE: SliderImage28 image, caption, link_url, order (number)Common mistakes when implementing an image slider in Bubble.io: Step-by-Step Guide
Why it's a problem: Not handling the index overflow when auto-playing
How to avoid: Add a condition: when current_index > total count, reset to 1 for infinite looping
Why it's a problem: Using large uncompressed images in the slider
How to avoid: Compress slider images to under 200KB each and use consistent dimensions
Why it's a problem: Hardcoding images instead of using a database
How to avoid: Store images in a SliderImage data type so admins can manage content from the database
Best practices
- Compress all slider images to under 200KB for smooth transitions
- Use consistent image dimensions across all slider items
- Connect the slider to a database for easy content management
- Add alt text for accessibility
- Pause autoplay on hover for better user experience
- Limit slider items to 5-7 for engagement — too many get skipped
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build an image slider in Bubble.io with auto-play, arrow navigation, dot indicators, and database-driven images. Can you outline both the Slideshow element approach and a custom carousel approach?
Add an image slider to this page. Use database-driven images with auto-play, arrow and dot navigation, and smooth transitions between slides.
Frequently asked questions
Can I add captions to each slide?
Yes. Add a caption field to your SliderImage data type and display it as a Text element overlaid on or below each image.
Can I make the slider full-width?
Yes. Set the slider container Group to 100% width with no max-width constraint. Use background-size: cover CSS on images.
How do I add transition animations?
The built-in Slideshow element supports fade and slide transitions. For custom carousels, use CSS transitions in an HTML element wrapping the images.
Can I link each slide to a different page?
Yes. Add a link_url field to SliderImage. Make the image clickable with a workflow that navigates to the URL.
Does the slider work on mobile?
Yes. Both approaches work on mobile. For touch swiping, you would need a JavaScript plugin for gesture detection.
Can RapidDev build a custom slider?
Yes. RapidDev builds polished sliders with custom animations, touch gestures, and advanced content management.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation