Streaming live at 10am (PST)

1 May 2019, webflow dynamic sliders yes/no?

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?

hi, Aaron
the link in that original post does not work

image

Refer to this post for additional info:

https://forum.webflow.com/t/webflow-i-30-cms-gallery-livestream/85048/3

1 Like

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.
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

  1. make a slider div

  2. place your collection into the slider div

  3. 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.
    image
    image
    if you are dealing with images and do not have a div size specified give your slider image a width of 100%

  4. give a name to your collection list the example is base-slider

  5. 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
image

***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

1 Like