LoginGet started — it’s free
Made in Webflow

Custom CMS Slider

7498 views
site profile thumbnail

Description

After seeing @Maximosaurus create a CMS slider in Webflow with no code, I decided to attempt taking it a few steps further using custom code. I'm not a developer so cobbled together the code best I could. Some cleanup might be needed! It is dynamic, adding and removing slides automatically as Collection Items are added and removed. Styles can easily be updated in the editor without having to touch any code, with all item states shown in the CMS for easy editing (the code replaces them in the live version). The design includes arrows that respond based on first/last slide (in this case showing a different style when the ends are reached, or can set opacity to zero), and the nav bubbles function with the capability of including slide numbers. No looping or swipe support yet, but hope to add soon! Download the reference image on slide one for a breakdown of how to re-create this in a new document, and get the custom code on slide two. Enjoy! I welcome feedback and improvements!
Feeling inspired?If this Made In Webflow site sparked some inspo, why not get started on a project of your own? Clone a site, purchase a template or start building from scratch.
cmsslidercustomcodeslideshowslidescollectioncollectionsdynamic

More by Jonathan Haring

See profile
View details
Jonathan Haring | Portfolio
15
© 2022 Webflow, Inc. All rights reserved.