One of the most common issues with sliders is that they look great on desktop but terrible on mobile. A 3-column layout that showcases your services beautifully on a large screen becomes a cramped, unreadable mess when squeezed onto a phone screen. You need a responsive slider that adapts automatically.

To solve this, use Div Render Container Slider for Elementor. It allows you to transform your layout from a multi-column grid on desktop to a single-column slider on mobile.

Step 1: Set Your Desktop View

First, configure your slider for the largest screen. In the Slider Settings, find the Slides Per View control. Ensure the responsive icon is set to Desktop (the computer monitor icon). Set this to 3 or 4, depending on how many columns you want to show at once on big screens.

Step 2: Adjust for Mobile

Now, click the responsive icon next to Slides Per View and select Mobile (the phone icon). The preview will change. Set the value to 1. This tells the slider to show only one full slide at a time on mobile devices, ensuring your content is large enough to read and interact with.

Step 3: Don’t Forget Tablet

Click the responsive icon again and select Tablet. Tablets are the middle ground. A value of 2 is usually perfect here—it provides enough density to show variety without overcrowding the narrower screen.

Pro Tips for Responsive Sliders

  • Use Decimals: On mobile, try setting Slides Per View to 1.2. This shows one full slide and a sliver of the next one. This “peek” effect visually cues the user that there is more content to swipe, improving engagement without needing navigation arrows.
  • Hide Arrows on Mobile: Navigation arrows often cover content on small screens. Use the responsive settings in the Navigation section to hide arrows on mobile and rely on dots or simple swipe gestures instead.