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 a CMS collection in Webflow—similar to the Atelier template where multiple CMS images scroll horizontally—you'll need to bypass the default Webflow Slider and instead use a horizontal scrolling section paired with multiple image fields in your CMS.

1. Understand the Core Approach

• Webflow’s native Slider component doesn’t support binding a dynamic number of images from separate CMS items into a single slide unless manually managed.
• In the Atelier template, they simulate a scrollable slider using a horizontal flexbox layout, allowing multiple images to scroll side-by-side.

2. Use Multiple Image Fields in Your CMS

• In your CMS collection (e.g., “Projects”), add multiple Image fields (e.g., Image 1, Image 2, Image 3...).
• Webflow does not yet support a true multi-image array field, so each image must be a separate field (unless you use a workaround with a multi-reference to an "Images" collection).

3. Create the Horizontal Scroll Layout

• Add a Collection List bound to your CMS item (like “Projects”).
• Inside, add a div called Image Scroll Wrapper.
• Set the wrapper to:
• Display: Flex, Direction: Horizontal
• Overflow: Scroll (or Auto) on the X-axis
• White Space: No Wrap (if using inline elements)
• Add an inner wrapper (e.g., Image Container) for each image field and bind the image from the CMS:
• Add an Image Element
• Bind it to Image 1, duplicate this element for Image 2, Image 3, and so on
• Style each image container with:
• Fixed width (e.g., 300px)
• Margin-right (for spacing)

4. Add Optional Scroll Enhancements

• Enable Smooth Scroll for better UX:
• Use CSS Scroll Snapping by setting scroll-snap-type: x mandatory on the scroll container
• And scroll-snap-align: start for each image item
• You may add scroll arrows or a custom scrollbar using Webflow interactions or minimal custom code.

5. Alternatives with a Separate CMS Collection (Optional)

If you want unlimited image flexibility, create a separate Images CMS collection and link each image to your main Projects using a Multi-Reference Field. Then:

• Add a nested collection list filtered to show only images related to the parent project.
• Apply the same flex horizontal scroll setup to this list.

Note: Webflow limits nested collection lists to 5 items by default unless you use Webflow Enterprise or apply workarounds with pagination.

Summary

To mimic Atelier’s multi-image horizontal scrolling from the CMS:

• Store images across multiple image fields or a separate collection.
• Use a horizontal scrollable flex container instead of a native slider.
• Bind each image individually and apply snap scroll if desired.

This method creates the scroll-to-the-right effect, allowing multiple CMS images to flow inline instead of a traditional overlay slider.