Instagram Stories—those circular avatars at the top of the feed—are an incredibly familiar and effective UI pattern for highlighting updates, members, or featured content.

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

Step 1: Circular Containers

Create a parent Container. Add child Containers inside.
Styling is key:
1. Give the child container a set width and height (e.g., 100px x 100px).
2. Set Border Radius to 50% to make it a perfect circle.
3. Set the Background Image to the user’s avatar (Cover / Center).
4. Add a border (e.g., 3px solid transparent with a gradient border radius trick, or a solid color) to mimic the “unread story” ring.

Step 2: Slider Settings

Enable Slider Mode.

  • Slides Per View: Set to Auto or a high number like 8 so many circles fit on the screen.
  • Space Between: Set to a small value like 10px or 15px.
  • Navigation: Hide Arrows and Dots. This interface relies purely on horizontal scrolling.

Pro Tips for Stories

  • Scrollbar: Enable the Scrollbar setting if you want a visual indicator of scroll position, though “hiding it” is more authentic to the app feel.
  • Mobile: This layout is native to mobile. Ensure it takes up full width on mobile devices for the best effect.