Streaming live at 10am (PST)

Custom CMS Slider!

#1

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!

2 Likes
#2

hi nice done but I have a problem
I only changed the pictures… and get this

my preview:
https://preview.webflow.com/preview/karelrosseel-minions-slideshow?utm_source=karelrosseel-minions-slideshow&preview=c13f27ffa1461b7e98cacc2f723bf8e1

live https://karelrosseel-minions-slideshow.webflow.io/
Thanks to help
Karel

#3

Ha! Love this. Right now there is a display filter on the code element so it will show in any panel where the code value is set in the CMS. If you go into that CMS item and empty the code entry area it should disappear! Or, if you go into the element panel and find the Code div inside the Collection Item and delete it it will also go away.

I’ve designed the slider so that you can easily put anything you want in each Collection Item and style however you like. No need to keep anything I put in there. You could even start from scratch with a totally new slide design and it should still work perfectly.

Let me know if that doesn’t do the trick!