Most sliders enforce equal width slides. But sometimes you want a “Metro” layout where some slides are wide and others are narrow.

To solve this, use Div Render Container Slider for Elementor.

Step 1: CSS Sizing

Disable the plugin’s automatic width calculation if possible, or use the Auto Slides Per View setting.
In Elementor, select each Child Container and give it a specific width (e.g., Slide 1: 40%, Slide 2: 20%, Slide 3: 60%).

Step 2: Slider Settings

Set Slides Per View to Auto.
This tells the engine: “Don’t force widths. Just stack them horizontally based on their CSS width.”

Pro Tips for Variable Widths

  • Free Mode: Variable width sliders feel best with Free Mode enabled, as “snapping” to irregular widths can feel jerky.