Example 1: CMS Slider

A real-life true CMS-driven slider with the native Webflow slider component

See Finsweet

What we will cover

  • The structure of our CMS Collection List (the feed)

  • The structure of our native Webflow Slider

  • The .slider() component to create a CMS powered slider.

This is native Webflow slider

In Designer, this has 2 slides

Project 1

Branding, Web Design


Rich text

The CMS List below is our "data feed". This will populate new slides in the Slider above.

On the published website, CMS Library creates a new Slide in the Slider for each CMS Item in the list below.

The child of the CMS Dynamic Item ('.slider-this-is-copied-to-slide') is 'copy and pasted' inside each 'Slide' above

This allows you to create a 100% CMS-driven Webflow native slider 💪

Project 1

Branding, Web Design

Project 2


Project 3

Web Design

Project 4


Project 5


Project 6

Motion Graphics

Project 7


Project 8

Web Design

Project 9

Web Design, Development

Project 10

Web Design, Development

Clone me!

You are almost there! Clone this template by clicking the link above. Learn, play around, test, use your own content, and have fun.

You can delete all .delete-me divs! All of the How-To content is in the .clonable divs.