(2020) Build Webflow CMS Dynamic Slider from Scratch | How To

  Рет қаралды 40,604

Finsweet

Finsweet

Күн бұрын

Learn how to build a Webflow CMS dynamic Slider in this step-by-step walkthrough tutorial! ⚠️ This system is happily no longer supported. CMS Library is now Attributes. Get the resource links below. 👇
TIMESTAMPS:
00:12 - Intro
00:32 - How to build it?
01:19 - CMS setup
01:51 - Structure
03:19 - Slider Component
13:47 - Visual Script Writer
15:57 - Live example
17:07 - Thank you
-----------------------------------------------
// EXPLORE ATTRIBUTES BY FINSWEET
🔥 Super hot promo for Attributes: • Attributes Promo by Fi...
Attributes: www.finsweet.com/attributes/ 👈
Webflow cloneable for Attributes: www.finsweet.com/attributes-c...
KZbin playlist for Attributes: • Attributes
Get help with implementation: attributes@finsweet.com
Subscribe to Finsweet: kzbin.info?su...
-----------------------------------------------
// RESOURCES FROM THE VIDEO
CMS Library is now a legacy solution.
Docs: cms-library.finsweet.com/
How-To: cms-library-howto.finsweet.com/
Visual Script Writer: cms-library-script-writer.fin...
-----------------------------------------------
// 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: / ​
Twitter: / thatsfinsweet​
Instagram: / ​
Dribbble: dribbble.com/thatsfinsweet​
Behance: www.behance.net/thatsfinsweet/​
Webflow: webflow.com/team/Finsweet/​
-----------------------------------------------
// TAGS
#webflow #cms #docs #javascript #library
-----------------------------------------------
Thanks for your support! 🤟

Пікірлер: 189
@UnlikelyView
@UnlikelyView 3 жыл бұрын
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.
@Finsweet
@Finsweet 3 жыл бұрын
Thank you so much!!! We appreciate your support!!!
@jennifersanjines1111
@jennifersanjines1111 3 жыл бұрын
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!
@Finsweet
@Finsweet 3 жыл бұрын
Thank you so much for the kind words!!! Thrilled to know you have so many ideas!!! 🙌 Share your work with us!
@robertglass4197
@robertglass4197 2 жыл бұрын
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!
@mindfulmagician7550
@mindfulmagician7550 3 жыл бұрын
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!
@Finsweet
@Finsweet 3 жыл бұрын
You're welcome!!!
@hiranga
@hiranga 3 жыл бұрын
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 !
@Finsweet
@Finsweet 3 жыл бұрын
Hey, Hiranga! Thank you so much for your kind words and support!!! We're thrilled!!! 🔥
@danielbm24
@danielbm24 2 жыл бұрын
Thanks Joe and the Finsweet team! You folks are absolutely amazing!
@Finsweet
@Finsweet 2 жыл бұрын
You're welcome! We appreciate you!!
@jaybigford2347
@jaybigford2347 3 жыл бұрын
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.
@Finsweet
@Finsweet 3 жыл бұрын
Hey, Jay! Thank you so much for the kind words!!! Yes, we want more people to use our products, learn and benefit!!
@graceongrid
@graceongrid 3 жыл бұрын
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!!
@Finsweet
@Finsweet 3 жыл бұрын
You're welcome!!!
@danielcobb4642
@danielcobb4642 3 жыл бұрын
This is perfect timing! FinSweet rocks! Thank you so much guys.
@Finsweet
@Finsweet 3 жыл бұрын
You're welcome!!!
@Filippahop
@Filippahop Жыл бұрын
Wow I'm a newbie and this was so clear and easy to follow - thanks a lot!
@wennifer1970
@wennifer1970 3 жыл бұрын
Awesome tutorial! You guys helped me out of a tight spot. Forever grateful!
@Finsweet
@Finsweet 3 жыл бұрын
You're welcome!!!
@eugenesoch
@eugenesoch 2 жыл бұрын
amazing! nearly 2 years later and still great tutorial! :)
@kevinemehizer5171
@kevinemehizer5171 2 жыл бұрын
Life saver!!!! Now to figure out how to put two on a page :). Thank you so much!!
@ashleyrose6106
@ashleyrose6106 3 жыл бұрын
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 🙌🏼🤗🤯👏🙌🏼
@Finsweet
@Finsweet 3 жыл бұрын
That's f'in sweet! 🔥
@karislizova
@karislizova Жыл бұрын
Guys, you are awesome! Thanks for the ton of work that you do!
@harrydhiman2002
@harrydhiman2002 Жыл бұрын
It's really AMAZING..... You are Rocking Bro!!!
@Norell88
@Norell88 2 жыл бұрын
Used it today. Thank you guys!
@zibilic
@zibilic 3 жыл бұрын
These are brilliant! Keep up the good work!
@Finsweet
@Finsweet 3 жыл бұрын
You're welcome!!!
@jenniferward6821
@jenniferward6821 3 жыл бұрын
You are my hero! Thank you. Merry Christmas!!
@Finsweet
@Finsweet 3 жыл бұрын
Thank you so much, Jennifer!!! Merry Christmas to you too!!!
@stephaniebates3812
@stephaniebates3812 3 жыл бұрын
Thank you so much for this video, perfect timing for a project I was working on.
@Finsweet
@Finsweet 3 жыл бұрын
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
@grantsenior3291
@grantsenior3291 2 жыл бұрын
Awesome! Great tutorial, thanks.
@jeffthesigma
@jeffthesigma 3 жыл бұрын
Thanks Joe! Worked Beautifully.
@Finsweet
@Finsweet 3 жыл бұрын
Nice!!
@interwebhumor7587
@interwebhumor7587 3 жыл бұрын
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
@Finsweet 3 жыл бұрын
Thanks so much!!! You can clone our project, or see it from the Designer, go to - finsweet.com/cmsdocs-howto-clonable
@StefanKRV
@StefanKRV 3 жыл бұрын
Thank you so much for this walkthrough!
@Finsweet
@Finsweet 3 жыл бұрын
You're welcome!!!
@manishahegde4789
@manishahegde4789 3 жыл бұрын
Oh godddd.... thank you so much for this video😭🤩🙌🏻
@Finsweet
@Finsweet 3 жыл бұрын
You're welcome!!!
@jesushusbands4248
@jesushusbands4248 2 жыл бұрын
Great stuff really quick and helpful tutorial.
@christinejanekudera3957
@christinejanekudera3957 2 жыл бұрын
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. :(
@djamelkadi5519
@djamelkadi5519 2 жыл бұрын
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
@eugenesoch8247
@eugenesoch8247 2 жыл бұрын
FA-BU-LOUS! THANK YOU! :)
@tasawerashraf5190
@tasawerashraf5190 2 жыл бұрын
nice work man keep it up
@markjoncheff853
@markjoncheff853 3 жыл бұрын
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?
@ericonca
@ericonca 3 жыл бұрын
Thank you so much! This was very helpful
@Finsweet
@Finsweet 3 жыл бұрын
You're welcome!!!
@1337faqsguy
@1337faqsguy 2 жыл бұрын
Game changer - thank you!
@Finsweet
@Finsweet 2 жыл бұрын
You're welcome!!
@josephgraham6098
@josephgraham6098 3 жыл бұрын
Holy shit. I'm late to the party, but this is awesome. Works flawlessly. Thanks dudes!
@jasonhebert1656
@jasonhebert1656 3 жыл бұрын
how did you get this to work? It doesn't do anything for me at all
@Finsweet
@Finsweet 3 жыл бұрын
You're welcome!!!
@Finsweet
@Finsweet 3 жыл бұрын
What's not working? Message us on sweetjs.io and we'll help you implement!
@kingdumb9692
@kingdumb9692 2 жыл бұрын
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?
@inspiredbyric6707
@inspiredbyric6707 3 жыл бұрын
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.
@Finsweet
@Finsweet 3 жыл бұрын
You're welcome! You can have the CMS collection sorted in the back-end!
@walisonmartinsw
@walisonmartinsw 2 жыл бұрын
Thanks, it helped me!
@Finsweet
@Finsweet 2 жыл бұрын
Glad to hear that!!
@KmanK
@KmanK 2 жыл бұрын
Dude, this is finsweet!
@iangathura3516
@iangathura3516 28 күн бұрын
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
@onzeauto.7626
@onzeauto.7626 2 жыл бұрын
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?
@adryanmendes8646
@adryanmendes8646 2 жыл бұрын
Amazing!
@c7407
@c7407 2 жыл бұрын
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!
@lindsayhartslief3377
@lindsayhartslief3377 2 жыл бұрын
I would also like to know the answer to this please
@domisiahaan2227
@domisiahaan2227 Жыл бұрын
hi, this is amaziing!! can we make the cms inside as grid also??
@ezekielrochat5683
@ezekielrochat5683 3 жыл бұрын
AMAZING!!!! THANK YOU!
@Finsweet
@Finsweet 3 жыл бұрын
You're welcome!!!
@megabiggs
@megabiggs 2 жыл бұрын
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.
@oswaldosola6300
@oswaldosola6300 3 жыл бұрын
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...
@Finsweet
@Finsweet 3 жыл бұрын
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!!!
@philippehahnwebdesignerpho774
@philippehahnwebdesignerpho774 3 жыл бұрын
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...
@Finsweet
@Finsweet 3 жыл бұрын
You're welcome!!! Yes, you can build Dynamic Tabs, check it out - kzbin.info/www/bejne/o2OoaZd_rZKahqs
@trin.notebook
@trin.notebook 3 жыл бұрын
OMG, it's work. Unbelivale.
@Finsweet
@Finsweet 3 жыл бұрын
Thank you so much!!!
@juhik.9969
@juhik.9969 2 жыл бұрын
Thank you so much!!!!
@jackhegarty6646
@jackhegarty6646 3 жыл бұрын
Yo this is amazing TY!!!!
@Finsweet
@Finsweet 3 жыл бұрын
You're welcome!!!
@panorama-works
@panorama-works 2 жыл бұрын
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.
@grantsenior3291
@grantsenior3291 11 ай бұрын
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?
@martinwrene5273
@martinwrene5273 2 жыл бұрын
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?
@thibaultdebuyst8769
@thibaultdebuyst8769 3 жыл бұрын
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!
@Finsweet
@Finsweet 3 жыл бұрын
Yes, please come to sweetjs.io . We have a fix for this now. In our next release, this issue will be officially fixed.
@archananair8754
@archananair8754 3 жыл бұрын
Would we be able to populate into the slider, images from 'Multi image' set rather than 'image' on CMS collection.
@janjan0219
@janjan0219 3 жыл бұрын
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?
@Finsweet
@Finsweet 3 жыл бұрын
You're welcome! Check out this walk-through - kzbin.info/www/bejne/pKOkiq2IlN2sgM0 Or, message us on sweetjs.io
@bryanmanio_
@bryanmanio_ 3 жыл бұрын
Perfect, thanks!
@Finsweet
@Finsweet 3 жыл бұрын
You're welcome!
@darkmark4935
@darkmark4935 3 жыл бұрын
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
@Finsweet 3 жыл бұрын
You're welcome! Check out - kzbin.info/www/bejne/qXbEgqiOZ6tjo5Y
@joemontero741
@joemontero741 2 жыл бұрын
Do you have a video of a custom slider with thumbnail preview images as the slide nav?
@keetalux
@keetalux 2 жыл бұрын
OMG i love you!!
@Finsweet
@Finsweet 2 жыл бұрын
We appreciate you!!!
@darkmark4935
@darkmark4935 3 жыл бұрын
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.
@Finsweet
@Finsweet 3 жыл бұрын
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
@michaelyoungsma8858
@michaelyoungsma8858 2 жыл бұрын
This is great. Can the slider be placed in a rich text blog collection?
@beppinodefner7420
@beppinodefner7420 3 жыл бұрын
Please let Webflow hire you!!! :D Just great!
@Finsweet
@Finsweet 3 жыл бұрын
Thanks! :D
@officerM1911
@officerM1911 2 жыл бұрын
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?
@SuperPunchpunch
@SuperPunchpunch 3 жыл бұрын
thanks, super helpful! could this be modified to show 3 smaller slides, instead of one big one?
@Finsweet
@Finsweet 3 жыл бұрын
You're welcome! Yes, you can add as many dynamic sliders as you want!
@CommercialDehydratorsCanada
@CommercialDehydratorsCanada 3 жыл бұрын
Bravo. Bravo
@affections8760
@affections8760 2 жыл бұрын
Very useful! but I wanted to know how can I show 4 items per slide instead of 1 ?
@aleksaorevic536
@aleksaorevic536 2 жыл бұрын
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!
@maxneeling2370
@maxneeling2370 3 жыл бұрын
thank you!
@Finsweet
@Finsweet 3 жыл бұрын
You're welcome!!!
@stvngunn
@stvngunn 3 жыл бұрын
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?
@Finsweet
@Finsweet 3 жыл бұрын
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.
@asafrombrandshine1075
@asafrombrandshine1075 3 жыл бұрын
Did you have any luck with this? I'm doing something similar but can't get them to Flex horizontal and not wrap.
@stvngunn
@stvngunn 3 жыл бұрын
@@asafrombrandshine1075 Yeah got it working, but haven't used this for a long time - I use a completely different slider now
@asafrombrandshine1075
@asafrombrandshine1075 3 жыл бұрын
@@stvngunn Can you link me please? Really stuck with this.
@stvngunn
@stvngunn 3 жыл бұрын
@@asafrombrandshine1075 Sure... kzbin.info/www/bejne/d3jCg3h9btVpZ6c
@stephaniekuypers7319
@stephaniekuypers7319 3 жыл бұрын
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.
@stephaniekuypers7319
@stephaniekuypers7319 3 жыл бұрын
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.
@Finsweet
@Finsweet 3 жыл бұрын
Hey! You add a new collection to the CMS template page and connect it with the slider component. Check out this walkthrough - kzbin.info/www/bejne/qKjMZoaFq5Jkoa8 If you need help with implementation, send us a message on sweetjs.io
@worldofsamdefesa2045
@worldofsamdefesa2045 3 жыл бұрын
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
@sihar97
@sihar97 3 жыл бұрын
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 :)
@Finsweet
@Finsweet 3 жыл бұрын
Filter + Slider is not yet supported. Thanks for the feedback!
@vasantha2021
@vasantha2021 2 жыл бұрын
Can I display 3 items horizontally per slide?
@haadiasheikh8190
@haadiasheikh8190 2 жыл бұрын
Amazing
@artisuntanning6323
@artisuntanning6323 3 жыл бұрын
Great!
@Finsweet
@Finsweet 3 жыл бұрын
Thank you!!!
@BooyaOff
@BooyaOff 3 жыл бұрын
Nice! very usefull video! Is it possible to do the same, but with thumbnails carousel under it?
@Finsweet
@Finsweet 3 жыл бұрын
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 - kzbin.info/www/bejne/nn2zl6yQftuEY8U
@zippy7164
@zippy7164 3 жыл бұрын
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.
@Finsweet
@Finsweet 3 жыл бұрын
Hey! Please message us on sweetjs.io!
@OliverHoffmannDesign
@OliverHoffmannDesign 2 жыл бұрын
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?
@akshaysingh548
@akshaysingh548 3 жыл бұрын
Visual Script Writer has a different layout now, how to get the exact code now?
@timon5612
@timon5612 3 жыл бұрын
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?
@Finsweet
@Finsweet 3 жыл бұрын
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%.
@JuliusHasenzahl
@JuliusHasenzahl 2 жыл бұрын
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.
@timon5612
@timon5612 2 жыл бұрын
@@JuliusHasenzahl Hi Julius, sorry for the late answer. Are you still working on the problem?
@laproductora439
@laproductora439 3 жыл бұрын
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"?
@Finsweet
@Finsweet 3 жыл бұрын
1 CMS item = 1 CMS slide. So you could reduce the size of slides to display 3 at a time instead.
@laproductora439
@laproductora439 3 жыл бұрын
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
@Finsweet
@Finsweet 3 жыл бұрын
@@laproductora439 Check out this walkthrough: kzbin.info/www/bejne/pKOkiq2IlN2sgM0 If you need help with implementation, then message us on sweetjs.io
@juanpabloalfonsosanchez3385
@juanpabloalfonsosanchez3385 3 жыл бұрын
AMAZINGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
@roheel1983
@roheel1983 3 жыл бұрын
Hi Finsweet! can you please help me doing the same exact thing but with 2 record in one slide ?
@Finsweet
@Finsweet 3 жыл бұрын
Hey! The component generates 1 slide per CMS item!
@asafrombrandshine1075
@asafrombrandshine1075 3 жыл бұрын
Can you do multiple sliders connected to different collection lists on the same page? For example Products and News Articles on the same page.
@Finsweet
@Finsweet 3 жыл бұрын
Yes, this is possible!
@kevbcharlton
@kevbcharlton 2 жыл бұрын
@@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?
@devone9475
@devone9475 2 жыл бұрын
Where do we get the CDN code?
@MrZxcvbnm22
@MrZxcvbnm22 3 жыл бұрын
Is it possible to use it on an e-commerce product page? Or it has to be on a static page?
@Finsweet
@Finsweet 3 жыл бұрын
This can be used with Webflow CMS and eCommerce!
@VetlyApp
@VetlyApp 3 жыл бұрын
@@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!
@peatear42
@peatear42 3 жыл бұрын
The new visual script writer doesn't have the "Functionality/Component" tab. Where can I find that? :(
@Finsweet
@Finsweet 3 жыл бұрын
Hey! We've got 3 visual script writer. Check this one for CMS Library - visualscript.webflow.io/
@jasonhebert1656
@jasonhebert1656 3 жыл бұрын
@@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
@jasonhebert1656
@jasonhebert1656 3 жыл бұрын
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
@Finsweet
@Finsweet 3 жыл бұрын
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.
@thorgal2007
@thorgal2007 3 жыл бұрын
Fin, how to make this design responsive ?
@Finsweet
@Finsweet 3 жыл бұрын
Hey, Chris! Best to learn that from here - university.webflow.com/
@worldofsamdefesa2045
@worldofsamdefesa2045 3 жыл бұрын
Hey . this is awesome bro. Can we do filter inside this slider? I want to know abt it.? @Finsweet
@Finsweet
@Finsweet 3 жыл бұрын
Are you asking if you can filter slides in and out of your slider?
@worldofsamdefesa2045
@worldofsamdefesa2045 3 жыл бұрын
Yeah. I'm asking you how we can filter these dynamic slides in this fs slider.?
@Finsweet
@Finsweet 3 жыл бұрын
@@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
@fancy3958
@fancy3958 3 жыл бұрын
Magic. Ma-gic.Magic.
@Finsweet
@Finsweet 3 жыл бұрын
Thank you so much!!!
@thecrimsonpugilist
@thecrimsonpugilist 2 жыл бұрын
godlike
@Finsweet
@Finsweet 2 жыл бұрын
🔥🔥🔥
@wearestudiotonic
@wearestudiotonic 3 жыл бұрын
I f'in love you guys.
@Finsweet
@Finsweet 3 жыл бұрын
Thanks so F'in much!!!!
@omarcre8
@omarcre8 3 жыл бұрын
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
@Finsweet 3 жыл бұрын
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?
@omarcre8
@omarcre8 3 жыл бұрын
@@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 😅
@fnk100
@fnk100 Жыл бұрын
He's almost perfect. But the first slide is duplicated. Thanks for sharing!
@jasonhebert1656
@jasonhebert1656 3 жыл бұрын
Does this still work? the visual script website is completely different now.
@Finsweet
@Finsweet 3 жыл бұрын
The visual script writer still works - cms-library-script-writer.finsweet.com/
@jasonhebert1656
@jasonhebert1656 3 жыл бұрын
@@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.
@jasonhebert1656
@jasonhebert1656 3 жыл бұрын
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
@jasonhebert1656
@jasonhebert1656 3 жыл бұрын
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
@jasonhebert1656
@jasonhebert1656 3 жыл бұрын
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?
@amandaakemi5811
@amandaakemi5811 3 жыл бұрын
Is it also mobile friendly??
@Finsweet
@Finsweet 3 жыл бұрын
Yes!!
@denniszenanywhere
@denniszenanywhere Жыл бұрын
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.
@AffinityPhoto
@AffinityPhoto 2 жыл бұрын
Imagine if the Slideshow field allowed image tagging (meta) for CMS filtering...
How to randomize CMS items with low code in Webflow
44:51
Webflow
Рет қаралды 5 М.
Неприятная Встреча На Мосту - Полярная звезда #shorts
00:59
Полярная звезда - Kuzey Yıldızı
Рет қаралды 7 МЛН
When You Get Ran Over By A Car...
00:15
Jojo Sim
Рет қаралды 13 МЛН
Tom & Jerry !! 😂😂
00:59
Tibo InShape
Рет қаралды 62 МЛН
SuperChallenge: Complete Website in 2 Hours
2:44:25
Flux Academy
Рет қаралды 109 М.
Webflow Tutorial - Creating a CMS Powered Slider
47:11
Jose Ocando
Рет қаралды 15 М.
Webflow CMS: How To Use Dynamic Data
27:37
Sam Harrison
Рет қаралды 21 М.
Build a Responsive Website | HTML, CSS Grid, Flexbox & More
2:02:22
Traversy Media
Рет қаралды 964 М.
FLEXBOX Custom Layouts in Webflow
14:48
Payton Clark Smith
Рет қаралды 11 М.
CMS Draggable Slick Slider in Webflow (2020)
26:46
Timothy Ricks
Рет қаралды 39 М.
Building a Webflow CMS Blog | Step-By-Step
32:49
Payton Clark Smith
Рет қаралды 67 М.
Easy Webflow CMS Slider with SplideJS: Step by Step Tutorial
13:42
Неприятная Встреча На Мосту - Полярная звезда #shorts
00:59
Полярная звезда - Kuzey Yıldızı
Рет қаралды 7 МЛН