I could almost cry... Soooo many uses in my head so many ideas, I'm not going to be able to sleep!!! Amazing work guys thank you I can't wait to give it a try!
You are my freaking hero! This has been a huge request for years in the Webflow Community and I've tried other dynamic slide codes to make it work, but your method looks easy. I can't wait to try this.
This worked like a charm! It seemed so daunting at first when I was watching the video. When I was initially creating it natively, it was exactly how you stated, had to create a limit 1 per slide. When I thought about my client updating the website with new slides, it wasn't practical! So happy that you shared this method!
This is AMAZING!!!! thank you so much! just implemented it on my client project and works amazing. Copy pasted to a different page - connect new CMS - works like a charm! Please don't delete this video, as I will use it on my studio's website as well, and I am very new to attributes. You rock!
CMS sliders have been the biggest headache for me - finally figured I should learn how to do them properly, this tutorial was amazing! Thank you for creating this!!
I tried to create this last week (without f'in) and didn't have any luck. I was so excited to see your Fbook post, and I just created a dynamic 'teams' slider in 30 mins!! Ahhhh thank you 🙌🏼🤗🤯👏🙌🏼
Thank you so much for this, really well presented video, but mostly amazed by how much work has gone into making that library work so well. I can't believe you dont have more views/subscribes. Definately sharing with my community. thanks again and keep up the great work.
Dude. You/ you guys have my deepest admiration. This is really fantastic. Thank you for putting this into the world for free!! Big love from Australia !
Your knowledge on this is really great and it is really well explained. But seeing the actual navigator and the hierarchy would be super helpful when trying to figure things out.
Finsweet is the absolute life saver. Thanks for all this amazing quality work you are all doing Joe. I have a question, not sure if it is something simple to solve and I just don't know it. I would like to have a few slides (four to be more exact) showing one next to the other on Desktop. How do I change that instead of having only one slide at a time? Many thanks!
Thank you for this! This is a huge help! Is there any workarounds with this having 3 elements in one slide instead of only 1? The functions are already working in my site but I wanted to display 3 elements in one slide instead of only having one. I tried using the Limit function to 3 but it's still showing one element per slide. :(
I have the slider formatted, and the first slide looks great! But the other slides aren't populating. Would that be a problem with the code? I'm using fs-dynamic-list and fs-slider, and the code from the visual script writer.
Thank you so much for this!! Is there a way that you can use this inside a CMS page? I can't figure out how to add a slider like this to every one of my portfolio pages. Do I have to create a separate list for the slider and then reference it in my portfolio list? Thank you so much in advance.
I found a workaround by adding a lot of slides and then setting them to only display when set but would still love to know if this can at all be used on a CMS page. My workaround doesn't work well as the last slide stays visible (grey). Looking for a solve now.
Hey! You add a new collection to the CMS template page and connect it with the slider component. Check out this walkthrough - th-cam.com/video/rwi5SOv-1kM/w-d-xo.html If you need help with implementation, send us a message on sweetjs.io
Hi there. I've got a page that has two collection sliders on it and I'd like them both to be collection managed. I've get one working properly using your script (works great!) but am running into problems trying to get a second slider to work. I've tried adjusting the script and the classes in the script to target the sliders separately, but I've not had any success yet. Any ideas?
Hey Joe this is awesome. Thank you for doing this. Would this work for multiple displayed slides, for example, an airbnb type slider, showing 6 in a row, instead of 1 single slider at a time?
Hey, Steven! Yes, we can show 6 in a row. The only rule with slider is that it’s 1 CMS item per 1 slide. We can not add multiple CMS items into 1 slide. With styles, you can create any layout for your slides to be displayed within the slider.
Thanks so much for this helpful tutorial! I noticed that for me that the button links don't load in the slider. I've tried editing both the buttons on the first and second slider to link to their current CMS page, but for some reason, they don't link after I've published them. Could it be some issue with the code embed I've placed onto the page?
Thanks guys got if first time, saved me a lot of time. I'm going to get the translator you have created. Thanks for the resources. Hey is it possible to have have 2 different dynamic sliders on the same page that have a different slide layout?
You're welcome! It's not possible to add an image element inside slider dots, but if you'd like to customise the look of the slider dots, then check out Hack 9 - th-cam.com/video/hLPfyZIvQ-c/w-d-xo.html
I want to use this feature to highlight some of our cars (we have different cars for different locations). How would I go about showing specific items from my cms?
Amazing work, has worked a real treat so far. I am running into a problem where links within the cms dynamic slider don't work on the published site (but do work in the designer). What's the fix for this, please?
This is awesome, but your visual scriptwriter interface has changed and you no longer have a CMS Class List field (just a Slider class)-- does this mean the build has changed?
Thank you for the great video, it really helped me. QUESTION: Is it still possible to sort the CMS Collection within the slider? For example, I want to sort by the published date.
how would i aproach this if i want multiple cms collection items on each slide, haven't tried yet but is it just the same or what would i need to change?
Thank you! Im looking to have a slide on each side of the second slider as users scroll into view. I'm curious, how can I make these sliders start/load on slide two instead of one?
@@Finsweet have the same issue this doesn't answer the problem. The link you show is compeltey different than what's shown int he video and doesn't seem to work. @peatear42 I feel your pain
@@Finsweet I’m wanting to do this, but can’t figure out how? Is it just a case of duplicating the collection list, renaming the id’s and tweaking the javascript? Or is there a simpler way?
So glad you found a solution, Stephanie!!! We're building a Library of Live Examples. If you want to include your project, submit this form - airtable.com/shrR6AE5D1PGIQdhp
Hi Joe, thanks for the tutorial it's working! However, seeing I use this code for my product-page the add to cart and cart popup doesn't work anymore? Is there a workaround for this? Cheer!
Starting a new thread. So it seems as though the script complete strips any classes / combo classes you have in the slider. So in my design I have my h1,h2,h3 etc all set to default black and I use combo classes such as white-text and green-text to add different colors When I load up the site for a brief second it loads correctly then it seems like that css is stripped and get my default black text. I'm gonna try and reverse it and default to the colours I want in my slider and add combo classes for the black text but just so everyone knows. This code does mess with your combo classes. Small price to pay for this feature, hopefully webflow makes this a native choice soon
You can add combo classes. Style the content in the hidden list, not the content in the slider. The hidden list items are ‘copy-paste’ to the slide element.
@@Finsweet Hey there. I've noticed when using this method on product pages, if you have product variants with alternate images, they are not swapped out when you make the selection within the add to cart form. For example, if you sell hats and have a variant of colors, when you select 'purple hat' the images within this dynamic slider are not repopulated. Have you run into this or have a solution? Thanks!
Loved this tutorial! I put this to use for an image carousel, so my client can just throw new images into the CMS Gallery and they automatically appear in the carousel. To make this look even more slick, I want the image in the middle of the slider to be about 20% bigger then the ones left and right to it. Any idea on how I can do that?
You're welcome! You can do this with Webflow Interactions or classadder-howto.webflow.io/ Follow this logic - when slide comes into view, increase size to 100%. When slide goes out of view, decrease size to 80%.
Hey Timon, im pretty new to webflow and custom code and i cant wrap my head around how to achive a carousell effect with the pictures left and right from the picture in sight. How did you do it? I would really appreciate an awnser. Greetings from Germany.
@@Finsweet it's not working for me. I have all my layers the same as this tutorial and I have the first slide linked up with all the CMS stuuff and the second without. Then I have the copy of the collection with the class fs-collection-list but when I use the javascript none of my cms content is displayed I'm not sure what I did wrong, I'd consider myself an advanced webflow user and I can't for the life of me figure this out.
I feel like this video is missing a step or something. I did have different class names outside of the slider. Coudl that be the issue? Do you have to use specific class names for even the wrappers. I'm so confused and frustrated lol
Ok I got it to work when I started from scratch. I think you need to keep the entire class structure exactly as it is in this video despite what he says about being abel to change them. I'm a little concerned that I wont' be able to style this the way I need to but that's the next step. So for anyone that needs to know this. You cannot use this on a pre build slider. I recommend building it from scratch with this in mind. Not a huge deal by any means annd it works great now that I got it! Excellend work
Ok, so none of my styles are working inside the slider. I am using a style guide, and the main culprite is my text-white style that is not working. It's fine in the builder and the preview but when I publish it I'm getting black text. Do I need to use some sort of fs class to achieve this?
Is it possible to add exclusive filter buttons to filter what shows in the slider? i tried combining the exclusive filter tutorial and this, but it didnt work. thanks :)
Hi, thank you this works amazingly! However, when I tried duplicating the process on the same page for a separate CMS collection I've made, the duplicated sliders don't work. If we're grabbing content from multiple CMS collections how can we run this function multiple times on one page? At the moment, I've only been able to get it to run successfully once on each page.
Hey! You're welcome! You can you create a new instance of the library inside the same script. Essentially, you'd generate separate code per slider/collection pair. If you need help with implementation, please message us on sweetjs.io
Thanks a lot! I'm still having a problem because I would like to put 3 logo clients in a row in each slider, but and I'm not able to add more than one. Is that possible with "your trick"?
I've tried this but it's always showing 1 item at the same time when I publish the page. You can take a look here if you want to understand what I'm saying: preview.webflow.com/preview/la-sarria-web-40a3aa92753cb329ba0260f07?preview=7fb7bec436748845fa76bce6de6f8a1d&pageId=60740ff960222464fb8ad8f4&mode=preview
@@laproductora439 Check out this walkthrough: th-cam.com/video/nrAYzR_xyJk/w-d-xo.html If you need help with implementation, then message us on sweetjs.io
Hey, I've noticed that collection won't load if I use this method two times on a same website. Collection loads when website is first loaded, but when I go on the second page where this method is used, collection won't load at all. I set different classes on different pages, but the problem still remains. Can you guys fix this? I can share a website and webflow share-only link in PM. Thanks!
Hi Joe, Wao, this tutorial along with the rest I've seen is incredible, I'm new to Webflow and although I've seen many people's tutorials yours are off the charts, the best of the best. Please continue to make tutorials of this quality, what you are contributing to the community is invaluable. I have a question, I managed to make the slider for my project (thanks to you), however, the records of the collection are displayed in reverse order, the last record is the first to be shown, then the penultimate and so on until you get to the first, within the designer also shows so, I saw that you had added a number field in the clone to sort them in the configuration, it is normal to show the last one first or I'm doing something wrong? the ideal would be not to have to sort them and that they are displayed in an orderly manner . Thanks again.... you are a Rock...
Hey!!! Thank you so much for those super kind words!!! You can learn about Sort from the Designer here - university.webflow.com/lesson/sort-collection-lists Keep learning!!!
Any ideas on how to make it work with a multi reference field collection? Webflow won't allow more than one multi reference field collection per page and everything seems to work, but it adds an additional slide with the referenced item by itself.
DUDE! YOU ROCK! I used this concept to make a interface for my web-comic (Soul of a Hero)! Note: if you change classes from fs the naming hierarchy needs to remain with dashes and in lower class. Do you have a patreon or somewhere to donate?
In webflow, Is it possible to filter or categorize images in cms slider ? anyone hav a solution please ? I tried with finsweet but the hidden dynamic list only get filtered but its not reflecting in slider. why? @joe any solution
Hey Finsweet, you're an absolute wizard for figuring this one out, thank you for sharing! May you help me take this a step further...? I am using this in my webflow e-commerce site and got it working perfectly apart from 1 thing: 1) the images do not respond to the colour variant change of the product :( You got me this far, I know you can help me figure it out! Thanks so much.
@@worldofsamdefesa2045 We are not sure. Have never tried. If you try it out and send it to us on sweetjs.io , we will take a look. It would have to be implemented on your build with the code in there ready to be tested
Been watching many webflow slider videos. No one shows the mobile view. My mistake was following each one and it turns out they are not responsive. So be careful with that. Also, I am still figuring out how my sliders could work on mobile . It seems you cannot use background image if you want whole screen. It won’t work on mobile.
hey fin, thx for the hack, I tried your method by dropping a lightbox component instead of an image inside the slider, it worked, however when I link it with other lightboxes, I am getting a duplicate in the lightbox view "eg: deutschol.webflow.io/products/20w-50-super-truck" - tried to only apply it in one collection list since the other one is hidden and vice versa the issue still remains the same.
@@Finsweet I found that your library with other components was conflicting with my build like the lightbox option, when I link them by giving them a group name, I get a duplicate of images in the lightbox preview and that's because you are using two identical collections in your hack. Moreover, I have a native tab component below the slider and the menu tab's active state was conflicting/changing (from active to not active) when I was scrolling into and out of view - and that's because after going through your library where I found out that you have some js going on with the current state on the tab menu for your cms tab hack - so I ended creating a custom slider from scratch which saved me all that hassle of going through the issue that I ran to when I was trying your hacks :s I would like to give a positive critic and it's more of my personal opinion of some hacks that you are offering as a solution: having two identical collections where you are pulling its content from one to another is too much on the page - the load is an issue if I have a lot of images (I saw that js line that only loads the right image) and google's engine is not keen on duplication and hidden content so after using your hacks I found it it was conflicting too much with other elements in my site which left me building the components from scratch with a bit of js code 😅
![ILLSLICK - KILLSHOT REMIX [FULL VERSION]](http://i.ytimg.com/vi/RIK8RrqIAzE/mqdefault.jpg)
I could almost cry... Soooo many uses in my head so many ideas, I'm not going to be able to sleep!!! Amazing work guys thank you I can't wait to give it a try!
Thank you so much for the kind words!!! Thrilled to know you have so many ideas!!! 🙌 Share your work with us!
You are my freaking hero! This has been a huge request for years in the Webflow Community and I've tried other dynamic slide codes to make it work, but your method looks easy. I can't wait to try this.
Thank you so much!!! We appreciate your support!!!
This worked like a charm! It seemed so daunting at first when I was watching the video. When I was initially creating it natively, it was exactly how you stated, had to create a limit 1 per slide. When I thought about my client updating the website with new slides, it wasn't practical! So happy that you shared this method!
You're welcome!!!
Thanks Joe and the Finsweet team! You folks are absolutely amazing!
You're welcome! We appreciate you!!
This is AMAZING!!!! thank you so much! just implemented it on my client project and works amazing. Copy pasted to a different page - connect new CMS - works like a charm!
Please don't delete this video, as I will use it on my studio's website as well, and I am very new to attributes.
You rock!
CMS sliders have been the biggest headache for me - finally figured I should learn how to do them properly, this tutorial was amazing! Thank you for creating this!!
You're welcome!!!
Life saver!!!! Now to figure out how to put two on a page :). Thank you so much!!
amazing! nearly 2 years later and still great tutorial! :)
I tried to create this last week (without f'in) and didn't have any luck. I was so excited to see your Fbook post, and I just created a dynamic 'teams' slider in 30 mins!! Ahhhh thank you 🙌🏼🤗🤯👏🙌🏼
That's f'in sweet! 🔥
Wow I'm a newbie and this was so clear and easy to follow - thanks a lot!
It's really AMAZING..... You are Rocking Bro!!!
Thank you for solving this issue
The only thing I think we missed is how it appears on different views Like mobile view and all
Used it today. Thank you guys!
Holy shit. I'm late to the party, but this is awesome. Works flawlessly. Thanks dudes!
how did you get this to work? It doesn't do anything for me at all
You're welcome!!!
What's not working? Message us on sweetjs.io and we'll help you implement!
Guys, you are awesome! Thanks for the ton of work that you do!
Thank you so much for this, really well presented video, but mostly amazed by how much work has gone into making that library work so well. I can't believe you dont have more views/subscribes. Definately sharing with my community. thanks again and keep up the great work.
Hey, Jay! Thank you so much for the kind words!!! Yes, we want more people to use our products, learn and benefit!!
Dude. You/ you guys have my deepest admiration. This is really fantastic. Thank you for putting this into the world for free!! Big love from Australia !
Hey, Hiranga! Thank you so much for your kind words and support!!! We're thrilled!!! 🔥
Dude, this is finsweet!
You are my hero! Thank you. Merry Christmas!!
Thank you so much, Jennifer!!! Merry Christmas to you too!!!
Awesome tutorial! You guys helped me out of a tight spot. Forever grateful!
You're welcome!!!
Thanks Joe! Worked Beautifully.
Nice!!
These are brilliant! Keep up the good work!
You're welcome!!!
hi, this is amaziing!!
can we make the cms inside as grid also??
Your knowledge on this is really great and it is really well explained. But seeing the actual navigator and the hierarchy would be super helpful when trying to figure things out.
Thanks so much!!! You can clone our project, or see it from the Designer, go to - finsweet.com/cmsdocs-howto-clonable
Awesome! Great tutorial, thanks.
Great stuff really quick and helpful tutorial.
Please let Webflow hire you!!! :D Just great!
Thanks! :D
Game changer - thank you!
You're welcome!!
Finsweet is the absolute life saver. Thanks for all this amazing quality work you are all doing Joe.
I have a question, not sure if it is something simple to solve and I just don't know it.
I would like to have a few slides (four to be more exact) showing one next to the other on Desktop. How do I change that instead of having only one slide at a time? Many thanks!
I would also like to know the answer to this please
This is perfect timing! FinSweet rocks! Thank you so much guys.
You're welcome!!!
Can I display 3 items horizontally per slide?
Very useful! but I wanted to know how can I show 4 items per slide instead of 1 ?
Hi Joe, works perfectly, have implement it in my website, thank you so much. Would be great to use it in several tabs, i'm still looking how to...
You're welcome!!! Yes, you can build Dynamic Tabs, check it out - th-cam.com/video/m2E8dIx-gPI/w-d-xo.html
This is great. Can the slider be placed in a rich text blog collection?
Thank you so much for this walkthrough!
You're welcome!!!
Amazing! reproduced it step by step and it worked perfectly, the only thing it misses is the responsive part I think :) But thanks a LOT
Thank you for this! This is a huge help! Is there any workarounds with this having 3 elements in one slide instead of only 1? The functions are already working in my site but I wanted to display 3 elements in one slide instead of only having one. I tried using the Limit function to 3 but it's still showing one element per slide. :(
FA-BU-LOUS! THANK YOU! :)
nice work man keep it up
Thanks, it helped me!
Glad to hear that!!
I have the slider formatted, and the first slide looks great! But the other slides aren't populating. Would that be a problem with the code? I'm using fs-dynamic-list and fs-slider, and the code from the visual script writer.
Do you have a video of a custom slider with thumbnail preview images as the slide nav?
Thank you so much! This was very helpful
You're welcome!!!
Thank you so much for this!!
Is there a way that you can use this inside a CMS page? I can't figure out how to add a slider like this to every one of my portfolio pages. Do I have to create a separate list for the slider and then reference it in my portfolio list?
Thank you so much in advance.
I found a workaround by adding a lot of slides and then setting them to only display when set but would still love to know if this can at all be used on a CMS page. My workaround doesn't work well as the last slide stays visible (grey). Looking for a solve now.
Hey! You add a new collection to the CMS template page and connect it with the slider component. Check out this walkthrough - th-cam.com/video/rwi5SOv-1kM/w-d-xo.html If you need help with implementation, send us a message on sweetjs.io
Would we be able to populate into the slider, images from 'Multi image' set rather than 'image' on CMS collection.
Hi there. I've got a page that has two collection sliders on it and I'd like them both to be collection managed. I've get one working properly using your script (works great!) but am running into problems trying to get a second slider to work. I've tried adjusting the script and the classes in the script to target the sliders separately, but I've not had any success yet. Any ideas?
Hey Joe this is awesome. Thank you for doing this. Would this work for multiple displayed slides, for example, an airbnb type slider, showing 6 in a row, instead of 1 single slider at a time?
Hey, Steven! Yes, we can show 6 in a row. The only rule with slider is that it’s 1 CMS item per 1 slide. We can not add multiple CMS items into 1 slide. With styles, you can create any layout for your slides to be displayed within the slider.
Did you have any luck with this? I'm doing something similar but can't get them to Flex horizontal and not wrap.
@@asafrombrandshine1075 Yeah got it working, but haven't used this for a long time - I use a completely different slider now
@@stvngunn Can you link me please? Really stuck with this.
@@asafrombrandshine1075 Sure... th-cam.com/video/AG_REG9p61E/w-d-xo.html
Thanks so much for this helpful tutorial! I noticed that for me that the button links don't load in the slider. I've tried editing both the buttons on the first and second slider to link to their current CMS page, but for some reason, they don't link after I've published them. Could it be some issue with the code embed I've placed onto the page?
You're welcome! Check out this walk-through - th-cam.com/video/nrAYzR_xyJk/w-d-xo.html Or, message us on sweetjs.io
Thanks guys got if first time, saved me a lot of time. I'm going to get the translator you have created. Thanks for the resources. Hey is it possible to have have 2 different dynamic sliders on the same page that have a different slide layout?
Nice!
very usefull video!
Is it possible to do the same, but with thumbnails carousel under it?
You're welcome! It's not possible to add an image element inside slider dots, but if you'd like to customise the look of the slider dots, then check out Hack 9 - th-cam.com/video/hLPfyZIvQ-c/w-d-xo.html
I want to use this feature to highlight some of our cars (we have different cars for different locations). How would I go about showing specific items from my cms?
Amazing work, has worked a real treat so far. I am running into a problem where links within the cms dynamic slider don't work on the published site (but do work in the designer). What's the fix for this, please?
This is awesome, but your visual scriptwriter interface has changed and you no longer have a CMS Class List field (just a Slider class)-- does this mean the build has changed?
Bravo. Bravo
Thank you for the great video, it really helped me. QUESTION: Is it still possible to sort the CMS Collection within the slider? For example, I want to sort by the published date.
You're welcome! You can have the CMS collection sorted in the back-end!
how would i aproach this if i want multiple cms collection items on each slide, haven't tried yet but is it just the same or what would i need to change?
Thank you! Im looking to have a slide on each side of the second slider as users scroll into view. I'm curious, how can I make these sliders start/load on slide two instead of one?
You're welcome! Check out - th-cam.com/video/sEaQuX2F0m4/w-d-xo.html
The new visual script writer doesn't have the "Functionality/Component" tab. Where can I find that? :(
Hey! We've got 3 visual script writer. Check this one for CMS Library -
visualscript.webflow.io/
@@Finsweet have the same issue this doesn't answer the problem. The link you show is compeltey different than what's shown int he video and doesn't seem to work. @peatear42 I feel your pain
Can you do multiple sliders connected to different collection lists on the same page? For example Products and News Articles on the same page.
Yes, this is possible!
@@Finsweet I’m wanting to do this, but can’t figure out how? Is it just a case of duplicating the collection list, renaming the id’s and tweaking the javascript? Or is there a simpler way?
Thank you so much for this video, perfect timing for a project I was working on.
So glad you found a solution, Stephanie!!! We're building a Library of Live Examples. If you want to include your project, submit this form - airtable.com/shrR6AE5D1PGIQdhp
OMG, it's work. Unbelivale.
Thank you so much!!!
Hi Joe, thanks for the tutorial it's working! However, seeing I use this code for my product-page the add to cart and cart popup doesn't work anymore? Is there a workaround for this? Cheer!
Yes, please come to sweetjs.io . We have a fix for this now. In our next release, this issue will be officially fixed.
AMAZING!!!! THANK YOU!
You're welcome!!!
Starting a new thread. So it seems as though the script complete strips any classes / combo classes you have in the slider. So in my design I have my h1,h2,h3 etc all set to default black and I use combo classes such as white-text and green-text to add different colors When I load up the site for a brief second it loads correctly then it seems like that css is stripped and get my default black text. I'm gonna try and reverse it and default to the colours I want in my slider and add combo classes for the black text but just so everyone knows. This code does mess with your combo classes. Small price to pay for this feature, hopefully webflow makes this a native choice soon
You can add combo classes. Style the content in the hidden list, not the content in the slider. The hidden list items are ‘copy-paste’ to the slide element.
Amazing!
thanks, super helpful! could this be modified to show 3 smaller slides, instead of one big one?
You're welcome! Yes, you can add as many dynamic sliders as you want!
Is it possible to use it on an e-commerce product page? Or it has to be on a static page?
This can be used with Webflow CMS and eCommerce!
@@Finsweet Hey there. I've noticed when using this method on product pages, if you have product variants with alternate images, they are not swapped out when you make the selection within the add to cart form. For example, if you sell hats and have a variant of colors, when you select 'purple hat' the images within this dynamic slider are not repopulated. Have you run into this or have a solution? Thanks!
Loved this tutorial!
I put this to use for an image carousel, so my client can just throw new images into the CMS Gallery and they automatically appear in the carousel.
To make this look even more slick, I want the image in the middle of the slider to be about 20% bigger then the ones left and right to it. Any idea on how I can do that?
You're welcome! You can do this with Webflow Interactions or classadder-howto.webflow.io/ Follow this logic - when slide comes into view, increase size to 100%. When slide goes out of view, decrease size to 80%.
Hey Timon, im pretty new to webflow and custom code and i cant wrap my head around how to achive a carousell effect with the pictures left and right from the picture in sight. How did you do it? I would really appreciate an awnser. Greetings from Germany.
@@JuliusHasenzahl Hi Julius, sorry for the late answer. Are you still working on the problem?
Magic. Ma-gic.Magic.
Thank you so much!!!
Hi Finsweet! can you please help me doing the same exact thing but with 2 record in one slide ?
Hey! The component generates 1 slide per CMS item!
Perfect, thanks!
You're welcome!
thank you!
You're welcome!!!
Oh godddd.... thank you so much for this video😭🤩🙌🏻
You're welcome!!!
Fin, how to make this design responsive ?
Hey, Chris! Best to learn that from here - university.webflow.com/
Does this still work? the visual script website is completely different now.
The visual script writer still works - cms-library-script-writer.finsweet.com/
@@Finsweet it's not working for me. I have all my layers the same as this tutorial and I have the first slide linked up with all the CMS stuuff and the second without. Then I have the copy of the collection with the class fs-collection-list but when I use the javascript none of my cms content is displayed
I'm not sure what I did wrong, I'd consider myself an advanced webflow user and I can't for the life of me figure this out.
I feel like this video is missing a step or something. I did have different class names outside of the slider. Coudl that be the issue? Do you have to use specific class names for even the wrappers. I'm so confused and frustrated lol
Ok I got it to work when I started from scratch. I think you need to keep the entire class structure exactly as it is in this video despite what he says about being abel to change them. I'm a little concerned that I wont' be able to style this the way I need to but that's the next step.
So for anyone that needs to know this. You cannot use this on a pre build slider. I recommend building it from scratch with this in mind. Not a huge deal by any means annd it works great now that I got it! Excellend work
Ok, so none of my styles are working inside the slider. I am using a style guide, and the main culprite is my text-white style that is not working. It's fine in the builder and the preview but when I publish it I'm getting black text. Do I need to use some sort of fs class to achieve this?
Thank you so much!!!!
Is it possible to add exclusive filter buttons to filter what shows in the slider? i tried combining the exclusive filter tutorial and this, but it didnt work. thanks :)
Filter + Slider is not yet supported. Thanks for the feedback!
Hi, thank you this works amazingly! However, when I tried duplicating the process on the same page for a separate CMS collection I've made, the duplicated sliders don't work. If we're grabbing content from multiple CMS collections how can we run this function multiple times on one page? At the moment, I've only been able to get it to run successfully once on each page.
Hey! You're welcome! You can you create a new instance of the library inside the same script. Essentially, you'd generate separate code per slider/collection pair. If you need help with implementation, please message us on sweetjs.io
He's almost perfect. But the first slide is duplicated. Thanks for sharing!
Thanks a lot! I'm still having a problem because I would like to put 3 logo clients in a row in each slider, but and I'm not able to add more than one. Is that possible with "your trick"?
1 CMS item = 1 CMS slide. So you could reduce the size of slides to display 3 at a time instead.
I've tried this but it's always showing 1 item at the same time when I publish the page.
You can take a look here if you want to understand what I'm saying:
preview.webflow.com/preview/la-sarria-web-40a3aa92753cb329ba0260f07?preview=7fb7bec436748845fa76bce6de6f8a1d&pageId=60740ff960222464fb8ad8f4&mode=preview
@@laproductora439 Check out this walkthrough: th-cam.com/video/nrAYzR_xyJk/w-d-xo.html
If you need help with implementation, then message us on sweetjs.io
Hey, I've noticed that collection won't load if I use this method two times on a same website. Collection loads when website is first loaded, but when I go on the second page where this method is used, collection won't load at all.
I set different classes on different pages, but the problem still remains.
Can you guys fix this? I can share a website and webflow share-only link in PM.
Thanks!
Visual Script Writer has a different layout now, how to get the exact code now?
OMG i love you!!
We appreciate you!!!
Hi Joe, Wao, this tutorial along with the rest I've seen is incredible, I'm new to Webflow and although I've seen many people's tutorials yours are off the charts, the best of the best. Please continue to make tutorials of this quality, what you are contributing to the community is invaluable.
I have a question, I managed to make the slider for my project (thanks to you), however, the records of the collection are displayed in reverse order, the last record is the first to be shown, then the penultimate and so on until you get to the first, within the designer also shows so, I saw that you had added a number field in the clone to sort them in the configuration, it is normal to show the last one first or I'm doing something wrong? the ideal would be not to have to sort them and that they are displayed in an orderly manner .
Thanks again.... you are a Rock...
Hey!!! Thank you so much for those super kind words!!! You can learn about Sort from the Designer here - university.webflow.com/lesson/sort-collection-lists Keep learning!!!
Any ideas on how to make it work with a multi reference field collection? Webflow won't allow more than one multi reference field collection per page and everything seems to work, but it adds an additional slide with the referenced item by itself.
Yo this is amazing TY!!!!
You're welcome!!!
DUDE! YOU ROCK! I used this concept to make a interface for my web-comic (Soul of a Hero)! Note: if you change classes from fs the naming hierarchy needs to remain with dashes and in lower class. Do you have a patreon or somewhere to donate?
can i use cms dynamic slider with cms filter?
In webflow, Is it possible to filter or categorize images in cms slider ? anyone hav a solution please ? I tried with finsweet but the hidden dynamic list only get filtered but its not reflecting in slider. why? @joe any solution
Hey Finsweet, you're an absolute wizard for figuring this one out, thank you for sharing! May you help me take this a step further...? I am using this in my webflow e-commerce site and got it working perfectly apart from 1 thing: 1) the images do not respond to the colour variant change of the product :( You got me this far, I know you can help me figure it out! Thanks so much.
Hey! Please message us on sweetjs.io!
Hey . this is awesome bro. Can we do filter inside this slider? I want to know abt it.? @Finsweet
Are you asking if you can filter slides in and out of your slider?
Yeah. I'm asking you how we can filter these dynamic slides in this fs slider.?
@@worldofsamdefesa2045 We are not sure. Have never tried. If you try it out and send it to us on sweetjs.io , we will take a look. It would have to be implemented on your build with the code in there ready to be tested
Where do we get the CDN code?
Great!
Thank you!!!
Amazing
I f'in love you guys.
Thanks so F'in much!!!!
Been watching many webflow slider videos. No one shows the mobile view. My mistake was following each one and it turns out they are not responsive. So be careful with that. Also, I am still figuring out how my sliders could work on mobile . It seems you cannot use background image if you want whole screen. It won’t work on mobile.
hey fin, thx for the hack, I tried your method by dropping a lightbox component instead of an image inside the slider, it worked, however when I link it with other lightboxes, I am getting a duplicate in the lightbox view "eg: deutschol.webflow.io/products/20w-50-super-truck" - tried to only apply it in one collection list since the other one is hidden and vice versa the issue still remains the same.
Hey, you're welcome! I checked the link, it seems to be working. Not sure what you're trying to achieve, could you please explain more?
@@Finsweet I found that your library with other components was conflicting with my build like the lightbox option, when I link them by giving them a group name, I get a duplicate of images in the lightbox preview and that's because you are using two identical collections in your hack. Moreover, I have a native tab component below the slider and the menu tab's active state was conflicting/changing (from active to not active) when I was scrolling into and out of view - and that's because after going through your library where I found out that you have some js going on with the current state on the tab menu for your cms tab hack - so I ended creating a custom slider from scratch which saved me all that hassle of going through the issue that I ran to when I was trying your hacks :s I would like to give a positive critic and it's more of my personal opinion of some hacks that you are offering as a solution: having two identical collections where you are pulling its content from one to another is too much on the page - the load is an issue if I have a lot of images (I saw that js line that only loads the right image) and google's engine is not keen on duplication and hidden content so after using your hacks I found it it was conflicting too much with other elements in my site which left me building the components from scratch with a bit of js code 😅
Is it also mobile friendly??
Yes!!
Imagine if the Slideshow field allowed image tagging (meta) for CMS filtering...
godlike
🔥🔥🔥