# Carousel for Repeating Groups Pro — Instructions
Step 1. Prepare your Repeating Group

First, create the Bubble Repeating Group you want to use as a carousel.

Your Repeating Group must already be configured to scroll horizontally. The plugin transforms the existing scrolling behavior of your Repeating Group into a carousel, so the Repeating Group itself must be horizontally scrollable.

To keep the indicator count and Total Items state accurate, make sure “Show all items immediately” is enabled in your Repeating Group settings.

If this option is disabled, Bubble may initially render only part of the list, which can prevent the plugin from detecting the full number of items.

Step 2. Assign an ID or Class to the Repeating Group

Assign an ID or class to the Repeating Group you want to turn into a carousel.

For example, if the Repeating Group ID is:

product-carousel

enter the same value in the plugin’s Target ID field:

product-carousel

You only need to use either Target ID or Target Class.

Step 3. Add Carousel for Repeating Groups Pro

Add the Carousel for Repeating Groups Pro element anywhere on the page.

The plugin element does not draw the carousel itself. Instead, it finds the target Repeating Group and applies the carousel behavior to it.

Use Horizontal for the Axis setting.

Step 4. Choose a Carousel Mode

The plugin provides three carousel modes:

Snap
Free
Marquee

Each mode has its own mode-specific settings.

For example, Snap settings only apply when Mode is set to Snap. They do not affect the carousel while Free or Marquee mode is selected.

Likewise, Free-specific settings only apply in Free mode, and Marquee-specific settings only apply in Marquee mode.

Step 5. Configure Snap Mode

Snap is designed for traditional item-based carousels such as product sliders, card carousels, testimonials, and featured content.

The following settings apply only to Snap Mode.

Snap Stop controls how the carousel responds to a strong swipe.

Momentum allows a strong swipe to move past multiple items before settling on the nearest item.

One at a time always moves exactly one item per interaction.

Snap Align controls where the active item rests. Start aligns it with the beginning of the carousel, while Center places the active item in the center.

Loop allows navigation from the last item back to the first item.

Autoplay automatically advances the carousel.

Use Autoplay Interval to define the number of seconds between each automatic move.

These settings only affect the carousel while Mode = Snap.

Step 6. Configure Free Mode

Free mode is useful when you want users to scroll naturally without forcing the carousel to stop at a specific item.

Free Mode provides the Friction setting.

Friction controls how quickly the carousel slows down after a mouse drag or flick.

Lower values stop sooner, while higher values allow the carousel to glide for longer.

Friction only applies while Mode = Free.

Snap-specific options such as Snap Stop, Snap Align, Loop, and Autoplay do not affect Free Mode.

Step 7. Configure Marquee Mode

Marquee mode creates continuously moving content and is ideal for logo strips, brand lists, news tickers, and other display-focused content.

Use Speed to control the movement speed in pixels per second.

The General Direction setting can be used to reverse the direction of the Marquee.

Speed only applies while Mode = Marquee.

Indicators and arrows are not displayed in Marquee Mode because there is no fixed active position.

⚠️ Important:

Marquee Mode duplicates items to create a seamless continuous loop.

Bubble workflows inside duplicated items will not run.

Use Marquee Mode for display-only content such as logo strips or news tickers.

If your carousel items need to be clickable or trigger Bubble workflows, use Snap or Free Mode instead.

Step 8. Configure General Settings

General settings control the overall carousel interaction.

Direction controls the direction used by Snap Autoplay and Marquee movement.

PC Grab allows desktop users to click and drag the carousel with the mouse.

Hide Scrollbar hides the browser scrollbar while keeping scrolling enabled.

Pause on Hover pauses Autoplay or Marquee while the pointer is over the carousel.

Pause on Press pauses automatic movement while the user is pressing the carousel.

Disable Clicks prevents elements inside the carousel items from being clicked.

Block Image Drag, Block Context Menu, and Block Selection can be used to prevent native browser interactions while users interact with the carousel.

Step 9. Configure Indicators

Indicators show the current carousel position.

Choose from:

• Dots
• Bars
• Numbers
• Progress

You can also customize the indicator size, spacing, colors, position, and offset.

Indicators are available in Snap and Free Mode only.

They are not displayed in Marquee Mode.

⚠️ Important:

To ensure the indicator count is accurate, enable “Show all items immediately” in your Repeating Group settings.

The indicator count is based on the items that the plugin can detect in the rendered Repeating Group.

Step 10. Configure Arrows

Enable Arrows to add Previous and Next buttons over the carousel.

You can customize the arrow icon color, background color, background opacity, size, and offset.

When Arrow Hide at End is enabled, unavailable navigation buttons are automatically hidden at the beginning or end of the carousel while Loop is disabled.

Arrows are available in Snap and Free Mode only.

They are not displayed in Marquee Mode.

Step 11. Configure Advanced Settings

Use Inactive Effect to visually separate the focused item from surrounding items.

Available effects include:

• None
• Scale
• Fade
• Scale + Fade
• Blur

The Scale effect does not enlarge the active item beyond its original size. Instead, items become smaller as they move farther away from the focus position.

Wheel Scroll converts vertical mouse-wheel input into horizontal carousel movement.

When enabled, scrolling the mouse wheel while the pointer is over the carousel may move the carousel instead of the page.

Keyboard allows users to navigate with the arrow keys while the carousel is focused or hovered.

Drag Threshold defines how many pixels the pointer must move before a press is treated as a drag.

Step 12. Control the Carousel with Workflow Actions

You can control the carousel directly from Bubble workflows.

Next moves to the next item.

Previous moves to the previous item.

Go To moves directly to a specific item index.

Carousel indexes start from 1, matching Bubble’s Repeating Group cell index.

For example:

Go To → Index = 3

moves the carousel to the third item.

Play starts Snap Mode Autoplay.

Pause stops Autoplay.

Refresh rescans the Repeating Group items and reapplies the carousel settings.

Use Refresh when your Repeating Group data changes dynamically and the indicator count or Total Items state does not update immediately.

Step 13. Use States and Events in Bubble Workflows

The plugin exposes several states that you can use in conditions and workflows.

Current Index returns the currently active item index, starting from 1.

Total Items returns the number of items currently detected by the plugin.

Progress returns the carousel scroll progress from 0 to 1.

Is Dragging tells you whether the user is currently dragging the carousel.

Is Playing tells you whether Autoplay is currently running.

Can Previous and Can Next indicate whether the carousel can move in that direction.

Visible Count returns the number of items currently visible inside the carousel viewport.

You can also run Bubble workflows from the following events:

• Slide Changed
• Reached Start
• Reached End
• Drag Started
• Drag Ended