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.
https://trm-assets-copy.webflow.io/slick-slider
Though I am currently working on a more customizable version.
https://preview.webflow.com/preview/trm-assets-copy?utm_source=trm-assets-copy&preview=e92f1bf501de2c51af5da71e6d585013
THe page is slick slider.
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
< style>
< 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’/>
< /style>
In the body code section add this
This is the javascript for the slick slider
< 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
always
Jeremy