looking through other forum posts I’m trying to figure out if webflow has a dynamic slider functionality or not.
Natively not yet, but you can create your own.
Take a look at this one here:
What happened to the CMS Gallery livestream that was going to happen on the 30th, the link returns a 404 on Youtube?
the link in that original post does not work
Refer to this post for additional info:
ok, so what I’m hearing from that livestream is that no dynamic slider functionality yet, but webflow is making progress towards that.
I wish there was a solid temporary workaround offered by webflow.
http://dynamic-slider.webflow.io/ page is no longer available.
This is a stop gap measure that might become obsolete with the multi-image fields in combination with webflow slider, and I haven’t finished the documentation yet but it uses a simple structure and code to create a dynamic cms slider using slick slider.
This is built on the idea in the original post by @webdev which is an static embed
You can a variation of it here.
Though I am currently working on a more customizable version.
The structure is very simple
to build the basic cms slider with no variation and using the slick slider css
make a slider div
place your collection into the slider div
style your collection item however you want. The slider is made of the collection list item. If you do not want your entire collection to be visible in the designer as it will be hard to design that way. Set the collection list to horizontal flex and the slider div to overflow hidden.
if you are dealing with images and do not have a div size specified give your slider image a width of 100%
give a name to your collection list the example is base-slider
Make sure to give your collection list a margin left and right 10% , this leaves a space for the left and right arrows.
in the page custom code- Inside< HEAD > tag add the following
This is the style pages for the standard CSS of the slick slider
**note delete any spaces in the code tags it is the only way it shows up here
< link rel=‘stylesheet’ href=‘https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css’/>
< link rel=‘stylesheet’ href=‘https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css’/>
In the body code section add this
< script src=‘https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js’>< /script >
then add this
***notice above where I have written base-slider you can rename to whatever you called your slider list. That is what makes the slider work with your particular list.
This is the base slider. Also of note the standard arrows are white and the slider buttons are dark grey/black so if your background color is either of those you will have an issue with them being visible.
I am currently working on documentation to explain how to customize the arrows and buttons for the slider but I have more work to figure out the ins and out.
This is an easier slider to implement than the cycle js one for standard slides or multiple slides.
If you have any trouble implementing the basic slider I have outlined I will try to help the best I can.
The full documentation and more options are at