(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.
See all videos from the playlist: • Attributes
-----------------------------------------------
// RESOURCES FROM THE VIDEO
Attributes: www.finsweet.com/attributes/c...
Live Example: attributes-cmsslider.webflow.io/
Get help with implementation: [e-mail]
Subscribe to Finsweet: kzbin.info?su...
-----------------------------------------------
// 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!
🙌 Join our community - finsweet.com/fin-pro
🛍 Shop our merch store - finsweet.com/merch
💪 Superpowers for your Webflow website - finsweet.com/attributes
🧰 Your toolkit for Webflow - finsweet.com/extension
-----------------------------------------------
// SOCIAL
Facebook: / thatsfinsweet
Twitter: / thatsfinsweet
Instagram: / thatsfinsweet
Dribbble: dribbble.com/thatsfinsweet
Behance: www.behance.net/thatsfinsweet/
Webflow: webflow.com/team/Finsweet/
-----------------------------------------------
// 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!

[@leewilson1978]

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.

[@lalucacreative]

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

[@alex-pattison]

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

[@simonester8735]

You are the Superheros of the Webflow community!!

[@milhoandesign]

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

[@carlosmera4793]

Finsweet team, you are amazing, thank you!!

[@shahriartanvir977]

Effin* Sweet Man! You guys are beyond amazing!

[@grantsenior3291]

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

[@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!

[@martingeyeryoutube]

Thank you. You guys are legends!

[@septunuswebdesign3679]

Awesome, thanks Joe!

[@ericaguadalupe7862]

Thank you, this worked beautifully!!!!!!

[@Cs2GamiNG]

This is gold. Thank you

[@jackrandall4679]

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!

[@user-shmuser85]

You are the best! Thank you!

[@IkevanGerven]

Joe and FS team are HEROES!

[@urban-pixel]

I simply love Finsweet...

[@hcorneliusson2424]

Thank you so much! So easy!!

[@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?

[@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!

[@lynackhilou4865]

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

[@fitgalaxy]

is it still working?

[@lynackhilou4865]

@@fitgalaxy yes and it is quite easy to implement

[@studiosoaked]

Thank you so much!

[@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?

[@ProjectVirtue]

Hi Joe, thanks for the amazing attributes update! Is there a fix for duplicate CMS data? If i limit to 5, then published slider will show 15 dots. Playing around with limit values, it seems to triple the designated amount of slides.

[@pedroandrade3725]

Hi, Joe! Thanks for the great tutorial. I've implemented in a website and it's working fine, except for one thing: "My interactions on Slider Change are not working". Can you give me a light on it? Thanks, man.

[@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!

[@goldenant9450]

does it have to 1 item per slide? or can i show 3 and when I slide i reveal 1 more (while hiding one of the original three)

[@tekone824]

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

[@mattlukaszewski]

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

[@liucheryl7033]

Hello Joe, and everyone! Dose it also work on grid CMS sliders?

[@javiercastellanos5260]

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 pleeeeeasseeeeeeeee it would make the awsome video way more awsome especially when you mention a second collection list mid way

[@shahriartanvir977]

I agree. I had faced a bit of problem here too. Let me know if you are still having issues, might be able to help.

[@javiercastellanos5260]

@@shahriartanvir977 Thank you so much for offering to help! I would love to get In contact with any webflow designer since I don't really know anyone else. I did find a way around the setback though

[@wkwkwkwkwkwkwkwkwk6717]

Hello @@shahriartanvir977~ I need your help :D I'm stuck at the second collection list too! I applied "hide" to the collection outside of the slide, and set the limit to show only 1 item to the collection placed inside the slide layer. It showed perfectly on Webflow. But when I published it, only the first item is shown on the slider. Appreciate it if you don't mind helping! Thank you!

[@Mr_trent]

This slider works perfect for me! In my projects template I would like 2 sliders using different collection lists, is this possible?

[@paulocardoso8519]

Hey guys. I'm trying this attribute and it looks great. But the swipe gesture is not working. Any thoughts on how can I solve it?

[@Sergy_Kondrashin]

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

[@sekeidesign]

Judging by the comments (and my experience) it looks like this library is partially broken. In my experience I can't use custom slider interactions and it consistently skips the second slide (actually completely ignores it from the count when inspecting the code. Any plans to fix this?

[@senju31]

When I compare what I see to what you have @00:45 - It says the following: *Custom code requires a hosting plan*. Is this a new requirement or is it that you've already paid for a hosting plan?

[@silverline-studio]

Is it possible to make this static too? That would cut the code/ CSS file too i think

[@stackathy]

If I have cards of differing heights (due to diff heading lengths, for example), how do I make it so they are all the height of the largest card?

[@ChelseaMadamba93]

Hi! Does this work for nested collections?

[@adhesion_co]

First of all. Thank you! This is great. I have found that when I have a smaller slider, my content can overflow my slider. I've tried styling the collection item from the data and the slider itself. Neither seem to impact anything. It looks fine in the designer but the published site overflows. Has anyone run into this?

[@2..D]

Any way to add multiple items to a single slide?

[@bigstachedesign3218]

Can you still use Slider animations with this attribute?

[@Wizastudios]

Do you have a mod for a carousel style slider?

[@jinzo664]

So this worked for me, but when i revisit the page, the slider only shows ONE CMS element, which is bizarre. not sure how to fix that.

[@cannonleo]

hi thank you for this, i have been looking for a way to create a cms slider but in card( product card format ), where they all populate on the screen in a single row, i tried looking out for where you actually created the designs either on the collection or in the slides and i didnt see such hence i am way more confused now

[@SanjayTPlays]

If you're still struggling with this my solution (for product cards on an eCommerce site) was to set the width of the "slide" element to eg: 20% and add 1.5rem padding to the slide element

[@GeorgeAngeloff]

Hi, there! Great tutorial, but I have a question. Is there any chance to have more than one ITEM from my COLLECTION per slide ? is there any count option or something ...?

[@bernardovacadamy2407]

Did you find the option?

[@Vlad-vd2on]

@@bernardovacadamy2407 Hey! I guess i found solution that might work for you. It's super simple. We have mask object as wrapper for slides. By default each slide takes 100% of the mask width, but if we will change the width of each slide to 30%, then one mask will fit 3 slides - bingo. Also slides counter works perfect and you can adjust how many slides you want to see on each device by tweaking slide width on each breakpoint. It worked for me, hope it will help :)

[@bernardovacadamy2407]

@@Vlad-vd2on Thank you, i will try

[@bernardovacadamy2407]

@@Vlad-vd2on It worked 🤟

[@joshmedina4008]

For some reason this action isn't working on my site. I had someone from Relume Library proof it and every input was correct. Not sure why this is happening or what to do.

[@olehansen6568]

Just like a list counter, is it possible to apply that to a CMS slider so it shows 1 of 8, 2 of 8, 3 of 8 etc., instead of dots?

[@febinchacko9992]

Create two text blocks one can be connected to the collection where you can create a field for numbers. Give the second text block to 8. And you can hide the navdots.

[@Beth-tz5fg]

I followed all the steps as you said (created collection items as I want them to look, added the code to the header, added attributes to the collection list and to the slider, and nothing shows in my slider!! Any ideas what the issue might be?!

[@itsghous]

are you applying this slider on a CMS based page? mine isn't working on a dymanic page on a static page it works fine

the only things i need right now is slider that have number/number pagination with cms and no library seem can do it (or have tutorial about it)

[@ojayz9220]

add slider animations?

[@patrick_foley]

Hi all! I'm wondering if there's something I'm missing to make the native "Slider change" interactions work with this solution? I've been having trouble animating. Thanks!

[@veosixyans4934]

I have the same issue - no 'Slider change' interactions work, looking for a solution.

[@conchess4884]

@@veosixyans4934 @Patrick Foley Did you guys manage to do that? On tutorial page fs added option to add atributes "name:fs-cmsslider-resetix" and "value:true", but that overrides all my previous interactions.

[@ventomichael2858]

Hi ! Is it possible to create a multi-columns slide ? Because I can't find a solution with multi-columns. Thanks !

[@alexmukhin6673]

Hi! Did you find a solution? I faced with the same problem:/

[@Daddleo]

Hello, we can't do this anymore, Webflow block the moving of the "Collection Item" now

[@AlirezaRabiei]

Hi, everybody my problem is just the first item loaded and other one not showed thanks if everyone can help me

[@maxmichalak5903]

This works great but if you're using this for e-commerce and have a variable product it will not update the nested list for different product options.. I had a "more images" collection list that dynamically populates via a "colors" dropdown. I hope it's an easy fix. Maybe someone can chime in.

[@maxmichalak5903]

Sorry, I dont remember what project I used this in. If I find it I will post it for you.@kodypendleton3151

[@KdusYared654]

I know its been quite some time, how would i create this multiple times on the same page? I would like multiple CMS Sliders on my page

[@bonidom1]

та

[@callumruk5000]

Anyone know what to change if you wanted to add a second on the same page

[@KdusYared654]

did you ever find out?

[@joshuayu9121]

anybody know what he did to hide the second part of the collection list and copy into the slider at 6:20?? I think he hit a hotkey and did something but I cant seem to catch it!

[@joshuayu9121]

nevermind i didn't realize he duplicated the collection list. but i have a new problem. i have a nested collection list for tags and webflow is stopping me from visualizing the slider in the same way because of it. does anyone know how to get around that?

[@lucynguyen6613]

This is awesome, however, I would love to see infinite scroll / hanging sliders. Having it go one by one is not user friendly when you have 100 items.

[@ryanheape2072]

Man, I can not get this to work. I tried it on a Dynamic page and also a Static page and messed with everything. I can see the number of dots in my Slider correctly corresponds to the amount of collection items, so I know it is not completely broken but the slider appears empty.

[@ryanheape2072]

UPDATE: after spending 3 hours (lol) figuring it out, you do have to populate and style the collection list for the images/content to actually appear in the slider. If it's images, drop an image in, link it to your multi-image field and make sure it's displaying at full width. Then the slider will populate with the images and you can style that from there.

[@itsghous]

ISSUE: This does not work inside a CMS template page. I implemented this on a static page and it worked like a charm But when I tried adding this to a CMS based page (dynamic page) this didn't run

[@xavie1143]

I have the opposite problem, it works on CMS Template Pages and it does not on static pages. Did you find a solution to your problem?

[@ryanheape2072]

Was having this problem so I tried on a Static page and couldn't get that to work either

[@Rassolov_Webflow]

Range slider does not work if you use range slider in a standard webflow slider, it simply does not work, the interesting thing is that if the range slider is located on the first slide, then it works, but when it is located on the second slide or third, etc. then it just doesn't work. It’s a pity, after googling the problem I found several requests with a similar problem that remained unresolved, I hope someday they will fix it, and it’s a pity that I won’t have to use the finsweet product. bad experience

[@jetklenbautista2471]

BUGGY! Navigation is not working once their is animation to the elements even you added the "fs-cmsslider-resetix=true"

[@jeremydennis6908]

I had to watch 3 other tutorials just to make sense of what was happening here. Granted, I am a beginner, so maybe this just isn't for someone like me. In the end, I ended up more confused.

[@u1sart]

But Why Go thru so much Hoops jus to add sliders into a native Webflow CMS.. Makes no sense.. SMDH.. why not make it easier and quick to do?

[@Local-Seo-Nerd]

Show the final result of the tutorial first, than show the tutorial.