How to build a media slider in Bubble

A simple and reliable way to build a media slider in Bubble is to use a Repeating Group that displays a list of images or videos, and then control which item is visible by changing a custom state (for example, “current_index”). When the user taps next/previous arrows, you update that custom state, and the Repeating Group scrolls to the corresponding cell. This works with Bubble’s native elements, no plugins required.

How to Build It

The idea is: you load a list of media files into a Repeating Group, set the RG to show them horizontally, and use a custom state to “move” to the next or previous item. The user sees only one item at a time because the RG has a fixed cell width equal to the slider’s width.

• Create a Repeating Group with content type Image or a custom Media type if you store multiple formats.
• Set its Layout to horizontal scrolling. Make the width of one cell match the whole slider frame.
• Inside the RG cell, place an Image element or Video element depending on your data type.
• On the page, create a custom state on the RG called “current\_index” with type Number.
• Add two arrows (left/right). Their workflows will change the custom state: decrease or increase by 1.
• Add an action in the same workflow: Scroll to entry in Repeating Group and give it the “current\_index”.

// Example of a Next button workflow
// Step 1: Set state RG Media's current_index = RG Media's current_index + 1
// Step 2: Scroll to entry in RG Media: entry = RG Media's current_index

Make sure the RG’s data source is the list you want to show (for example, Current Page Product’s Media). To avoid out-of-range scrolls, add conditions to the buttons, such as hiding the Next button when current\_index = RG’s list of items:count.