Webflow CMS Slider - Cycle2.js and Webflow

One of the most versatile, useful, and relatively easy to implement jquery’s is Cycle2.Js Many including myself have found Webflow’s slider inadaquate for end user/customer functionality.

Cycle2 is the best workaround. Because it can create a slider out of any div. It is great for testimonials, imagery and text. When paired with the paging ability it can be a dynamic video player or music player using embeds all across the internet.

Cycle2 also works natively within Webflow using the custom attributes to set different functions. You can also have multiple CMS sliders working independently on a single page.

I have updated the page including much more thorough instructions and samples. Really it is just a start to what the cycle2.js can do.

https://webflow.com/website/cms-slider-and-cycle2js

I will hopefully get around to doing a video tutorial to create the bancamp album embed slider or some of the other ones.

A question though for people more proficient with code than I am.
For the single image pager example. In the CSS I used .cycle-pager >* to select the class what does >* signify in this case? I know it works but I’m not sure why. Whereas with the default pager example the CSS uses .default-pager span selector.

Feel free to give any feedback you might have or simplify things. Or ask any questions I will help out if I can. I have been asked but I don’t know how to implement it with the new multi-image field in webflow. I’m not sure it is possible.

2 Likes

Hey @jbleroux,

Thanks for sharing!

1 Like

Tabathapictou07@gmail.com

Hi Tabatha did you have a question?

Resource Page - > Cycle2

That is a child combinator selector. Selects (>*) all nodes that are direct children.

Child combinator docs at MDN

1 Like

Thanks a lot Jeff, I got glossy-eyed going through the docs and even the google search I did was confusing. I tried to use the span attribute in the CSS but it didn’t work. I will dive into this more. A little knowledge can be a dangerous thing but creating workarounds are necessary with webflow to increase end-user functionality. Without a firm understanding of javascript and only bits of jquery cycle2’s use of custom attributes it the easiest no-code solution. Next up accessibility.

Thanks so much Jeremy for your incredible work here.

You built this to work with single image. In the webshop I am working on, I need the images to pull from a multi-image field.

it was working until a couple of weeks ago.

Does anyone whether Webflow made some adjustments to their Javascript, or have I made an adjustment or missing something vital to allow this to work?

be very glad of someone’s input into getting this running with multi-image fields.

https://www.dust-team.co.uk/shop/angle-grinder-cutting-shroud-for-115-125mm-bosch-grinders

Heads up that something is preventing this solution all of a sudden. It’s worked fine for a long time but doesn’t now.

This solution fixed it: cycle2 stopped working! · Issue #859 · malsup/cycle2 · GitHub

<script src="https://cdn.jsdelivr.net/gh/malsup/cycle2@2.1.6/build/jquery.cycle2.min.js"></script>