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:
———————————————–
// RESOURCES FROM THE VIDEO
Attributes:
Live Example:
Get help with implementation:…
source
This post was automatic generated with this wp-automatic-plugin
Thank you so much!
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.
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?
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?
BUGGY! Navigation is not working once their is animation to the elements even you added the "fs-cmsslider-resetix=true"
Joe and FS team are HEROES!
thx! If you reload the page sometimes not all slides load up. Tested with chrome/ff on your tutorial-page and webflow-example-page.
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.
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.
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?
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!
How would i implement this for showing not just one cms item at a time per slide, but showing say the 1st 8 items then sliding accross to the next 8 and so on?
Hello, we can't do this anymore, Webflow block the moving of the "Collection Item" now
thank you so much !!!! this is the first solution that i found working flawlessly
Hello Joe, and everyone! Dose it also work on grid CMS sliders?
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.
You are the Superheros of the Webflow community!!
Any way to add multiple items to a single slide?
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.
Effin* Sweet Man! You guys are beyond amazing!
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
Do you have a mod for a carousel style slider?
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!
Anyone know what to change if you wanted to add a second on the same page
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!
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
Great walkthrough Joe. I'm implementing this on a client project right now. Thank you!
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?!
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.
Can you still use Slider animations with this attribute?
Amazing! Finsweet just keep bringing the goods – thank you!
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?
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!
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.
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 …?
first of all thank you ! this is just amazing work up here! is it possible to make thumbnails? thank you!