BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Pro widget

Container Carousel Widget for Elementor Pro

Turn the elements of any container into a carousel.

Overview

What Container Carousel does

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.

Live demo

See it in action

Plan

Sketch each slide as a normal Elementor element.

Build

Put the elements in one container.

Slide

Drop Container Carousel into the same container.

Style

Style the arrows and dots in the Style tab.

Features

What it can do

  • Makes slides from the other elements of its container, or from a container found by CSS ID.

  • Can be a carousel on Desktop, Tablet and Phone, or only on the devices you pick.

  • Slides Per View accepts decimals such as 1.2 to show a peek of the next slide.

  • Control bar above or below the slides with arrows, dots, a counter and a progress bar.

  • Arrows in the bar or over the sides of the slides, in four icon shapes.

  • Autoplay with a pause button, and a pause on hover and focus.

  • Mouse drag, touch swipe and keyboard arrow keys.

  • Optional loop, free scroll, centered active slide and equal height slides.

Use cases

When to use it

Card rows on phones

Keep three cards side by side on desktop and pick only Phone under Turn Into a Carousel On, so they become a swipe carousel on small screens.

Custom slides

Build each slide as an inner container with any widgets inside, then drop the carousel widget into the same parent container.

Section columns

Give a section a CSS ID and point the widget at it, so its columns become the slides.

Setup

How to set it up

What you need: A container with at least two other elements in it (or a container or section with a CSS ID).

  1. Add a container and place at least two elements in it, for example three inner containers.

  2. Drag Container Carousel into the same container. Its place among the other elements does not matter.

  3. Leave Slides Come From on The container this widget is in, or choose A container by CSS ID and type the CSS ID.

  4. Set Slides Per View and Gap Between Slides for each device, and choose the devices under Turn Into a Carousel On.

  5. In Control Bar, set Bar Position and switch Arrows, Dots, Counter and Progress Bar on or off.

  6. In Behaviour, switch on Loop or Autoplay if you want them and set Autoplay Delay (ms).

  7. Style the slides, bar, arrows, dots, counter and progress bar in the Style tab.

FAQ

Questions and answers

What can be a slide?

Any direct child of the container: a widget, an inner container, or a column when the target is a section.

Can it be a carousel on phones only?

Yes. Choose only Phone under Turn Into a Carousel On. On desktop and tablet the container keeps its normal layout.

Where do I put the widget?

Anywhere in the container that holds the slides. Bar Position decides whether the bar shows above or below them.

Does autoplay respect reduced motion?

Yes. Autoplay does not run for visitors who ask their device for reduced motion.

Bright Addons Pro

Get Container Carousel with Bright Addons Pro

Bright Addons Pro has 80 Pro widgets plus all 51 free widgets, 10 extensions, a Theme Builder and 32 dynamic tags. From $18 a year, with a 14-day money-back guarantee.