Hi all! First time trying to make/share something. It’s a little rough around the edges still, but thought I would share where it’s currently at.
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!
Here’s the clone-able Webflow page:
Custom CMS Slider
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!
Any element can be styled in the editor as desired, and the content currently in the Collection Item (where each slide design exists) is just placeholder. Feel free to replace and design your own slides! And you can customize any animations that happen when slides transition by selecting the animationTrigger element and editing the existing animation or creating your own! You can animate any items within the slide design, or even the arrows and bubbles! Just keep in mind that any animation on the slide elements will animated on ALL slides at the same time, so may be seen during the transition out for the current slide.
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!
