# How to implement an image slider in Bubble.io: Step-by-Step Guide

- Tool: Bubble
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

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.

## Before you start

- 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

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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.

### 5. 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 code example

File: `Workflow summary`

```text
IMAGE SLIDER — SETUP SUMMARY
==============================

OPTION A — SLIDESHOW ELEMENT:
  Element: Slideshow
  Data source: Search for SliderImage sorted by order
  Autoplay: 5 seconds
  Transition: slide or fade
  Navigation: arrows + dots

OPTION B — CUSTOM CAROUSEL:
  Custom state: current_index (number, default 1)
  Image source: SliderImage search :item # current_index

  Left arrow: Set current_index = current_index - 1
    Only when: current_index > 1
  Right arrow: Set current_index = current_index + 1
    Only when: current_index < total count

  Auto-play: Do every 5 seconds → increment index
    Reset to 1 when reaching the end

  Dots: Horizontal RG of numbers 1-N
    Active dot: conditional background color
    Click: Set current_index = this number

DATA TYPE: SliderImage
  image, caption, link_url, order (number)
```

## Common mistakes

- **Not handling the index overflow when auto-playing** — The index increments past the last image, showing blank content Fix: Add a condition: when current_index > total count, reset to 1 for infinite looping
- **Using large uncompressed images in the slider** — Large images cause slow transitions and loading delays Fix: Compress slider images to under 200KB each and use consistent dimensions
- **Hardcoding images instead of using a database** — Changing slider content requires editing the page every time Fix: 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

## 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.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/implement-an-image-slider-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/implement-an-image-slider-in-bubble