How can I create a multi-image slider from CMS in Webflow, similar to the Atelier template, where the images scroll to the right instead of having just one image sliding over itself? You can view my current implementation on my site Read-Only.

To create a multi-image slider from the CMS in Webflow, similar to the Atelier template where multiple images scroll horizontally instead of overlapping, follow these steps:

1. Structure Your CMS Collection

• Create or update a CMS Collection with a multi-image field (e.g., Gallery Images).
• Each Collection item can then store multiple images for the slider.

2. Add a Collection List Wrapper

• Drag in a Collection List onto your page or inside a section.
• Connect it to the CMS Collection containing the multi-image field.

3. Nest Collection List for Multi-Image Field

• Inside the first Collection List (bound to your main CMS item), add a multi-image Collection List.
• This will bind to the Multi-Image field of the CMS item (e.g., Gallery Images).
• Webflow will automatically create a nested Collection List recognized by the multi-image field.

4. Style the Horizontal Scroll

• For the outer Collection List Wrapper:
• Set display to Flex (Horizontal, No Wrap).
• Overflow: Auto (set on a wrapper div around the Collection List, not the list itself).
• For the inner Collection Items (each image):
• Set a fixed width (e.g., 300px) so they sit side by side.
• Add padding or margin between images if needed.
• This setup enables a horizontal scroll effect, where images scroll side-by-side rather than fading or sliding over one another.

5. Add Optional Smooth Scrolling or Scroll Snap

• To enhance the experience:
• Enable Horizontal Scroll Snap by setting Scroll Snap > Horizontal (mandatory) on the wrapper.
• Apply Scroll Snap Align: Start or Center on each Collection Item for consistent alignment.
• You can animate left/right movement with interactions or custom attributes if needed, but for pure horizontal native scroll, this setup is sufficient.

6. Make It Responsive

• On smaller breakpoints:
• Adjust each image's width (e.g., switch from 300px to 80vw) to keep it mobile-friendly.
• Maintain horizontal overflow so scrolling works on touch devices.

7. Optional: Add Custom Arrows or Scroll Buttons

• You can position left/right arrows outside the scroll wrapper.
• Use Webflow interactions to push the scroll position of the outer wrapper using the “Scroll” or “Move” animation.

Summary

To build a CMS-driven multi-image horizontal slider like the Atelier template, use a nested Collection List bound to a multi-image field, style the wrapper for horizontal flex and overflow, and optionally enhance with scroll snapping or custom interactions. This creates a smooth horizontal scrolling gallery using native CMS data.