CMS Slider in Webflow

In this episode, I create CMS Slider in Webflow and WeBlocks.
Cloneable project
webflow.com/we...
WeBlocks
www.weblocks.com/

[@lanalebed]

Does not work! I did everything. as you showed, but nothing happens!

[@Am_ro12]

Hello - this was fantastic, thank you. I am unfamiliar with WeBlocks, I will explore more. Just wondering if the code will always work? Does it require a paid subscription and would it be best to create own for clients rather than copy yours?

[@bykatarzyna310]

Hi, cool tutorial. Is it possible to do it without CMS collection? Just flexbox or grid?

[@alexandermikolyk7987]

I don't understand anything, how do you edit this in weblock?

[@garethellison01]

I know this is an old post. Only thing I couldn't manage to bring up was the pagination? I take it you need to pay or sign up to weblocks? There's currently an open link which we're discussing work arounds for CMS slider. I'll leave a link to this vid as even without pagination this is by far the most straightforward, as well as best functionality and best easthetics. Works like a charm! How on earch WF can't put a native CMS slider in there is beyond me!?

[@bursty5214]

If I dynamicly hide post, you are still able to scroll true the invisble blocks

[@davoregyed]

Big thumbs up for creating and sharing this CMS Slider! (Saw it in the Webflow Designers Group, it came at a perfect time) I have weblocks on my watchlist for the future :)

[@alexandermikolyk7987]

How do I remove the infinite scrolling?

[@michal-molka]

Nie do końca rozumiem jak to działa. Konfigurujesz opcje CSS w Weblocks, potem od razu odświeżasz stronę i od razu widać efekt zmian. Czy to jest tak, że skrypt JS i CSS sa na serwerze WeBlocks i konieczne jest ciągłe opłacanie abonamentu aby dana funkcja wykonana z użyciem Weblocks mogła ciągle działać? Np taki slajder...jeśli skonfiguruję go na stronie internetowej tak jak na tym filmie to będę musiał utrzymywać abonament WeBlocks aby ten slajder ciągle działał, tak?

[@weblocks]

Hey Michal, WeBlocks allows you to export JS code for free or use paid version with WeBlocks hosting

[@yvonlangue]

Hi there, I this has been so helpful. Thank you so much. I am facing an issue with the limitation of slides, which at some point, stop showing. Can you please point at something I could/should look into? Thanks a lot.

[@yvonlangue]

I found one possible solution in the webflow cms list itself: beyond 100 items, one needs to activate pagination.

[@prijunkoirala2410]

Hi, how can i make it not loop infinitely in this design?? Love the design and everything. I just want it to not loop infinitely. Also, is there way to have the slider to not overflow on the left slide as well?? Thanks.

[@yvonlangue]

In your weblocks script, change the loop from 'true' to 'false'.

[@sumaiyahabib1572]

Hi I want to make the same slider without the cms. I just want the slider with the cards start over to the first slide. I hate the blank space it makes. How can I achieve this?

[@weblocks]

at this moment we don't have this kind of functionality in WeBlocks, but please go to Swiper.js documentation. You should be able find out more information there

[@shyndornadia1637]

How to add a second slider?

[@WeddingfilmsinfraserValley]

Is there a way to apply this so that the active slide is centered? I am trying to achieve an endless loop, but with the arrows on either side of the active slide, which is best achieved by having the active slide centered.

[@weblocks]

Yes, you can set it up in Webflow! If you want more guidelines, send a preview link. I will try to write you more details about what you can do

[@jeberulz]

Man this is amazing and great. Thank you 🙏🏽

[@jeberulz]

Man this is amazing and great. Thank you 🙏🏽

[@shibly95]

Man, great video. Make Advance Filtering, Load more, Pagination and many more videos.

[@weblocks]

Thanks, Sifat, there will be more videos very soon!

[@theshivangigupta_in]

Helpful

[@webflowproject]

Amazing bro

[@yash7630]

Great video!!!! can you guide me regarding finding webflow work I am struggling a bit

[@weblocks]

Hey Yash, thank you! If you are struggling to find webflow job my advice is to try build your own templates. It's not so simple, but you can learn in the process(design and dev), build portfolio and creat passive income! All the best, Mac

[@yash7630]

@@weblocks Thanks

[@marcuspaivio]

Hello! Awesome video! I noticed a bug. If I change the class-names to something else in the project eg. Slider Wrapper to Client Slider Wrapper, etc. it does not work anymore. Any ideas why that is? I would like to have two instances of CMS-slider on the same page and now I cannot as only the Slider Wrapper, Slider List, etc. works as class names....

[@marcuspaivio]

It seems that the changes are not saving. I see the changes in the Weblocks editor code view, but when I open the .js in a browser it does not reflect the changes I have made to the class-names.

[@weblocks]

Hi @@marcuspaivio , thank you for great feedback, for more customizations I would suggest checking out Slider.js library documentation. About saving JS please check if you open browser without cookies using CMD-Shift-R or using extension: Chrome Cache Killer, thank you!!

[@marcuspaivio]

@@weblocks Hi! Thanks for replying! I did a few more tests and I can confirm the updated class-names are not updating in the .js linked file. The code works fine if I copy it directly from the editor window into Webflow as it has the correct class-names, but as it is not updating the .js I am not able to host it from WeBlocks.

[@weblocks]

@@marcuspaivio thank you very much for informing me about that, we just resolved the issue, code updating works correctly now

[@marcuspaivio]

@@weblocks No probs! You Are doing an awesome job! 💪

[@michaelyonke]

Really cool stuff you are making, thanks for the video. I noticed in your example that the slider is infinitely looping with no blank space at the end of the last item. I wasn't able to replicate that from your video. The only difference is that I have my collection list set to flex aligned middle. Can you explain how I can make that happen? Thanks!

[@weblocks]

Thank you Michael, I would need a link to the website you create to check it out

[@michaelyonke]

I can shoot it over by email, is there a good address to send it to?

[@michaelyonke]

@@weblocks Also, do you have any good tutorials on setting an "active" state for the current slide?

[@harshitagrawal5589]

💪Super Cool!

[@weblocks]

Thank you Harshit! 💪💪💪