Service sections often consist of 3 or 4 cards (Icon, Title, Description) laid out in a grid. On mobile devices, these grids stack vertically, forcing users to scroll past huge blocks of content to see everything. A better UX pattern is to keep them in a horizontal line that users can swipe through.

To solve this, use Div Render Container Slider for Elementor to transform your service grid into a swipeable card deck on mobile, without affecting the desktop layout.

Step 1: Designing the Service Card

First, build your cards. Create a parent Container (this will be the slider wrapper). Inside, add a child Container for the first service card. Style it with a background color, border radius, and box shadow. Add your Icon Box or separate Icon and Heading widgets inside.

Duplicate this child Container 3 or 4 times for your different services. At this stage, they will simply stack or sit side-by-side depending on your Flexbox settings.

Step 2: Activating Slider Mode

Select the main parent Container. In the Layout tab, toggle Enable Slider Mode to “Yes”.

This immediately contains the overflow. Now you need to define how these cards appear on different devices.

Step 3: Configuring Responsive Breakpoints

The goal is “Grid on Desktop, Slider on Mobile”.

  • Desktop: Set Slides Per View to 3 (or however many cards you have per row). If you have 3 cards and set it to 3, it will look exactly like a static grid. Disable Navigation Arrows and Pagination for desktop to maintain the clean grid look.
  • Mobile: Switch the view to Mobile. Set Slides Per View to 1.1. This setting is the key to the “Swipeable” look. The 0.1 allows the user to peek at the next card, intuitively indicating horizontal scrollability.

Pro Tips for Card Sliders

  • Equal Height: Ensure your child containers have enough content or min-height so they look uniform. The slider engine usually handles equal height well if the parent is set correctly.
  • Grab Cursor: Enable Grab Cursor in the settings. This gives desktop users (who might be on touch laptops) and mobile users a visual cue that the element is interactive.
  • Spacing: Use the Space Between control to add breathing room between the cards. A value of 20px typically works well to separate the shadows of adjacent cards.