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!
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!
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!
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!
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?
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?
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, 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 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 :)
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!
Everything looks great and works in chrome but in safari the 'slider' is scrolling up and down on the page where as in Chrome it's working correctly like a left and right slider....any thoughts on what I could be doing wrong?
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 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
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!
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?
1 year later so it might not help you, but I ran into this same issue. If you set the first slide on the slider to 32% it will populate 3 slides and a 4th will be peaking in so users know to keep sliding.
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?
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.
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.
ปีที่แล้ว
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)
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 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 @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.
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.
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
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
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.
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
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!
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?
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.
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.
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
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.
You are the Superheros of the Webflow community!!
Joe and FS team are HEROES!
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!
Finsweet team, you are amazing, thank you!!
I simply love Finsweet...
Brilliant! Thanks for this. And the multiple CMS sliders on a page works fab as well!!
Thanks, Finsweet, I owe so much to your content! 🙏🏼
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.
Effin* Sweet Man! You guys are beyond amazing!
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!
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!
Thank you. You guys are legends!
Thank you, this worked beautifully!!!!!!
This is gold. Thank you
thank you so much !!!! this is the first solution that i found working flawlessly
is it still working?
@@fitgalaxy yes and it is quite easy to implement
Awesome, thanks Joe!
Amazing! Finsweet just keep bringing the goods - thank you!
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!
You are the best! Thank you!
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?
Great walkthrough Joe. I'm implementing this on a client project right now. Thank you!
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.
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?
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?!
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
Can I double like this video?? Thanks a lot!
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 ...?
Did you find the option?
@@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 :)
@@Vlad-vd2on Thank you, i will try
@@Vlad-vd2on It worked 🤟
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!
Thank you so much! So easy!!
Everything looks great and works in chrome but in safari the 'slider' is scrolling up and down on the page where as in Chrome it's working correctly like a left and right slider....any thoughts on what I could be doing wrong?
Any way to add multiple items to a single slide?
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
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.
@@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
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!
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?
HI thanks.
If I want to show more then one Item In slider then how can I do that ?
This slider works perfect for me! In my projects template I would like 2 sliders using different collection lists, is this possible?
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)
1 year later so it might not help you, but I ran into this same issue. If you set the first slide on the slider to 32% it will populate 3 slides and a 4th will be peaking in so users know to keep sliding.
is there a way to make this work but not have entire cms slider content download all at once. Having images/some videos makes the site load slow...
Thank you so much!
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?
thx! If you reload the page sometimes not all slides load up. Tested with chrome/ff on your tutorial-page and webflow-example-page.
hii there I have doubt is any possible for change color and position for slider dot icon
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?
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?
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?
Is it possible to make this static too? That would cut the code/ CSS file too i think
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.
first of all thank you ! this is just amazing work up here! is it possible to make thumbnails? thank you!
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.
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)
add slider animations?
Hi! Does this work for nested collections?
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.
Hello Joe, and everyone! Dose it also work on grid CMS sliders?
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!
I have the same issue - no 'Slider change' interactions work, looking for a solution.
@@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.
Hi, everybody
my problem is just the first item loaded and other one not showed
thanks if everyone can help me
Hello, we can't do this anymore, Webflow block the moving of the "Collection Item" now
Hi !
Is it possible to create a multi-columns slide ? Because I can't find a solution with multi-columns.
Thanks !
Hi! Did you find a solution? I faced with the same problem:/
Do you have a mod for a carousel style slider?
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
та
Can you still use Slider animations with this attribute?
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.
Sorry, I dont remember what project I used this in. If I find it I will post it for you.@kodypendleton3151
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
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
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?
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.
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
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?
Was having this problem so I tried on a Static page and couldn't get that to work either
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!
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?
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.
BUGGY! Navigation is not working once their is animation to the elements even you added the "fs-cmsslider-resetix=true"
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.
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.
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
Anyone know what to change if you wanted to add a second on the same page
did you ever find out?
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.
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?
Show the final result of the tutorial first, than show the tutorial.