How to set up and style the Container Carousel widget in Elementor.
Container Carousel turns the other elements of the container it sits in into slides: widgets, inner containers or the columns of a section. The widget itself only prints the control bar with arrows, dots, a counter and a progress bar. Use it when you want to build each slide freely with normal Elementor elements.
Part of: Bright Addons Pro. Before you start: A container with at least two other elements in it (or a container or section with a CSS ID).
| Option | What it does |
|---|---|
| Slides Come From | Uses the container this widget is in, or a container found by CSS ID. |
| CSS ID | The CSS ID set on the container or section (Advanced tab). Its direct children, or the columns of a section, become the slides. |
| Turn Into a Carousel On | The devices where the container is a carousel. On the others it stays as built and the control bar is hidden. |
| Slides Per View | How many slides show at once. Decimals show a part of the next slide. |
| Gap Between Slides | The space between two slides. |
| Slides to Move Per Click | Moves one slide or a full page per click. |
| Start at Slide | The slide shown first. |
| Equal Height Slides | Makes all slides as tall as the tallest one. |
| Center the Active Slide | Keeps the active slide in the middle. Best with a decimal number of slides per view. |
| Free Scroll | Slides do not snap into place after a swipe or drag. |
| Label for Screen Readers | The name of the carousel that screen readers announce. |
| Option | What it does |
|---|---|
| Bar Position | Puts the bar below or above the slides. |
| Arrows | Shows the previous and next arrows. |
| Arrows Position | In the bar at the end, at the start, one at each end, or over the sides of the slides. |
| Arrow Icon | Chevron, Arrow, Triangle or Double chevron. |
| Dots | Shows one dot per page of slides. |
| Counter | Shows the current page and the total. |
| Counter Separator | The character between the two numbers. |
| Progress Bar | Shows a bar that fills as the carousel moves on. |
| Option | What it does |
|---|---|
| Loop | At the last slide the carousel goes back to the first. Without it the arrows switch off at both ends. |
| Autoplay | Moves on by itself. It pauses in the editor, off screen, in a hidden tab and for visitors who ask for reduced motion. |
| Autoplay Delay (ms) | The time between two moves. |
| Pause on Hover and Focus | Pauses autoplay while the pointer or keyboard focus is on the carousel. |
| Pause Button | Adds a button that lets visitors stop the movement. It shows only with Autoplay. |
| Drag With the Mouse | Lets visitors drag the slides with the mouse. Touch screens can always swipe. |
| Keyboard Arrow Keys | Lets the arrow keys move the carousel. |
One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $18 a year, with a 14-day money-back guarantee.
These sections are in the Style tab.
the look of each slide, with Border Radius, Padding and Room for Shadows (px).
Alignment, Gap Between Items and Distance From the Slides.
the look of the buttons, Gap Between Arrows, Distance From the Edge and Move Up or Down.
Size, Active Dot Width, Gap, and colors for normal, hover and active.
the counter text, Current Number Color and Space Around the Separator.
Height, Maximum Width, Track Color, Fill Color and Border Radius.
Any direct child of the container: a widget, an inner container, or a column when the target is a section.
Yes. Choose only Phone under Turn Into a Carousel On. On desktop and tablet the container keeps its normal layout.
Anywhere in the container that holds the slides. Bar Position decides whether the bar shows above or below them.
Yes. Autoplay does not run for visitors who ask their device for reduced motion.
Check the troubleshooting guide, or contact support with the page address and what you expected to happen.
Troubleshooting guide