(2022) Build a Webflow CMS Slider - No-Code Attributes

In this video, we learn how to build a CMS-powered Webflow Slider using Attributes. We'll go through the docs, the Designer, and turn a Webflow Collection List into a Slider Component.

TIMESTAMPS:
00:00 - Intro
00:31 - Live implementation of CMS Slider
01:30 - Overview of the Collection List
02:09 - How are slides created?
03:36 - Add Attributes to the Collection List
04:00 - Add Attributes to the Slider
04:45 - Overview of the Slider
06:09 - Visualise the Slider
09:14 - Thank You

ATTRIBUTES: Add advanced features to your Webflow project without code. Attributes is the new way to implement @Finsweet into your @Webflow project.

-----------------------------------------------

// RESOURCES FROM THE VIDEO

-----------------------------------------------

// ABOUT US

We’re Finsweet - a Webflow enterprise partner, badass product creator, and educational content powerhouse. We are taking Webflow to a new level and sharing everything with you along the way!

-----------------------------------------------

// SOCIAL

-----------------------------------------------

// TAGS

#cms #slider #webflow #attributes

-----------------------------------------------

Thanks for your support! 🤟

[RobertTrew]

Just wanted to say with this the amazing thing is, I had a client in the CMS have a multi image field and wanted the images in the multi field to be displayed as a slider. This sorted it out so quickly! Amazing!

[leewilson]

Thanks so much Joe, I've just rebuilt my client slider using Attributes and so glad I did. Cut the admin down by 50%, no entering the same info twice.

[alex-pattison]

Great walkthrough Joe. I'm implementing this on a client project right now. Thank you!

[lalucacreative]

Amazing! Finsweet just keep bringing the goods - thank you!

[simonester]

You are the Superheros of the Webflow community!!

[carlosmera]

Finsweet team, you are amazing, thank you!!

[milhoandesign]

Thanks, Finsweet, I owe so much to your content! 🙏🏼

[karakonjolenciona]

Cheers, Joe!
I had struggle with the Sliders a lot. This tutorial of yours seems that the slider isn't draggable.
We all want Webflow to update them slider finally so it will be much more flexible:
1. CMS
2. Easy to visually modify
3. Easy to animate and build interactions
4. Draggable
5. Pagination
6. Clickable (link-box)
7. Indipendent (so if you have more than one slider on the page you won't move the upper one by clicking the arrows of the top one or the other way around)
8. If it is possible to deliver coffee time to times!
T.Ricks had a good tutorials over sliders but still not the perfect sollution.
Greetings G!

[shahriartanvir]

Effin* Sweet Man! You guys are beyond amazing!

[grantsenior]

Brilliant! Thanks for this. And the multiple CMS sliders on a page works fab as well!!

[lynackhilou]

thank you so much !!!! this is the first solution that i found working flawlessly

[jackrandall]

Hey @Finsweet, is there any advice out on using slide change interactions with the CMS Slider? I haven't been able to figure it out, seems there's a couple others in the comments with the same problem. Thanks for building this!

[javiercastellanos]

I love these tutorials, but for a beginner it gets very confusing when you just click elements in the viewport or cycle through with your arrows because no one knows what your working on at that point. use the NAVIGATOR to NAVIGATE it would make the awsome video way more awsome especially when you mention a second collection list mid way

[cristina.aytecdigital]

Sooo nice and helpful 🙌 I've implemented it a couple of times and works perfectly, thank you so much! Is there a way to completely hide de slider component when the collection list is not populated? I'd really appreciate some help with this!

[dorianakalaj]

This is amazing! I have a question, what if the dynamic content inside one slide has a paragraph that is shorter than the paragraph in the other collection items?
The slide should be shorter than the others. I noticed that setting the height of the slider as "Auto" creates all the slides of the same height and consequently the slides that contain shorter texts end up having excessive spaces on the bottom. What can be done?

[YuliaOddbee]

Thank you so much - I have implement this for a dynamic multi-image slider; how is this not a default functionality from Webflow, I don't understand! Saved me so much time!

[mattlukaszewski]

Can I double like this video?? Thanks a lot!

[sergiorecabarren]

Thank you very much Finsweet! Is there any way to add a counter to show the number of the current slide and total slides? With this method?

[tekone]

thx! If you reload the page sometimes not all slides load up. Tested with chrome/ff on your tutorial-page and webflow-example-page.

[Sergy_Kondrashin]

first of all thank you ! this is just amazing work up here! is it possible to make thumbnails? thank you!