You’ve designed a beautiful layout with multiple columns, perhaps a row of feature cards or a team member grid. It looks perfect on desktop, but on mobile, the columns stack vertically, creating a “page of endless scrolling.” You want these items to remain in a horizontal row that users can swipe through, just like a native mobile app experience, but Elementor’s default containers only offer stacking or wrapping options.

To solve this, use Container Slider for Elementor. It essentially adds a toggle to your existing container settings, letting you transform any standard layout into a fully functional responsive slider without rebuilding content. This approach keeps your DOM light and gives you the full design power of Elementor for every individual slide.

Step 1: Setting Up Your Elementor Container Layout

First, build your layout using standard Elementor Containers.

  1. Drag a Container onto your page. This will serve as the “Parent” or “Wrapper” for your slider.
  2. Inside this Parent Container, add your Child Containers (or widgets).
    • Example: If you are building a Testimonial slider, add 3 or 4 child containers. Place your Icon, Heading, and Text Editor widgets inside each one.
  3. Style these items exactly as you want them to appear. Don’t worry about the sliding functionality yet, just ensure they look good as a static grid or row.

Step 2: Activating Slider Mode on the Parent Container

Now, let’s turn this static layout into a dynamic slider.

  1. Select the Parent Container (the one wrapping all your items).
  2. In the Elementor panel, go to the Layout tab.
  3. Find the Slider Mode section.
  4. Toggle Enable Slider Mode to Yes.

Immediate Result: Your child containers should now snap into a horizontal row, and you might see the first one or two items depending on the default settings.

Step 3: Configuring Responsive Slider Settings

With the slider active, you can now fine-tune how it behaves on different devices.

1. Define Slide Visibility (Slides Per View)

Control how many items appear at once.

  • In the Layout tab, look for Slides Per View.
  • Desktop: Set this to 3 (or however many columns you built).
  • Tablet: Click the device icon and switch to Tablet. Set this to 2.
  • Mobile: Switch to Mobile. Set this to 1  for a classic full-width slide, or 1.2 to show a “peek” of the next slide, encouraging users to swipe.

 

2. Add Navigation

Help users navigate through your content.

  • Go to the Navigation section (in the Layout tab).
  • Navigation Arrows: Toggle to Yes to add Previous/Next arrows.
  • Pagination: Select Dots (bullets) to show position indicators at the bottom.

3. Adjust Spacing

  • Use the Space Between control to define the gap (gutter) between your slides. 20px is a standard starting point.

Pro Tips for Elementor Container Sliders

  • Equal Height Slides: If your content varies in length (like testimonials), ensure your Child Containers have their height set to “100%” or use Flexbox “Align Self: Stretch” on the parent to ensure all slides are the same height for a uniform look.
  • Previewing: Sometimes the Elementor editor tries to render complex JavaScript in real-time. If the slider looks stuck while editing, click the “Update” button and preview the page on the frontend to see the smooth transition effects.