Custom Webflow Sliders - Creating a one-step slider inside Webflow

Have you got frustrated with the slider arrows in Webflow before? Have you had a look at Splide and wanted to cry? This video is for you! You can achieve some really great results using the native Webflow slider.
We are going to customise the style and position of the slider dots, configure the mask settings so that you can create a 'one-step' slider, use Finsweet's CMS Slider attributes system to dynamically pull content in, and Flowbase's custom slider arrows so that you can style them and position them wherever you want.
After editing I realised that I was only recording my window rather than full screen so you can't see me fiddling around in Figma - SORRY SORRY. The main thing I did that you would have needed to see was right clicking on the arrow icon and copying as an SVG - hopefully you can figure that one out!
Timestamps:
02:00 - Standard slider start
03:28 - Connect Finsweet Attributes to pull slides from CMS
05:20 - Styling the Webflow slider arrows
11:09 - Customising slider dots
14:25 - Starting the one-step slider
14:55 - Building custom slider arrows as link blocks
16:10 - Using the slider mask to create the one-step effect
18:13 - Configuring Flowbase custom slider arrows
Links:
Finsweet Attributes for the CMS Slider - finsweet.com/attributes/cms-s...
Flowbase custom slider arrows - www.flowbase.co/blog/custom-n...
Cloneable - webflow.com/made-in-webflow/w...
Intro music:
Lofi Study by FASSounds on Pixabay
Outro music:
Relaxed Vlog by Ashot-Danielyan-Composer on Pixabay
Connect with us:
www.wearetonic.uk/
/ wearestudiotonic
/ 83074405

[@garethellison01]

These things should be included in the main WF course for building a slider. How to adjust the movement size when pressed. Something so obvious, yet so painfully frustrating. Thanks so much for this. :)

[@adogheahuoseerionamhen8114]

This was super helpful. Now I can build super power sliders now, the custom slider arrows are gamer changers.

[@TheSbd3]

I only discovered your channel when looking how to really customise the slider. Great explanation, Tom! I'm from a print background but I love working in Webflow now that I've been dragged kicking and screaming into the 21st Century!

[@wearestudiotonic]

We’re glad you found it useful! Stay tuned, big channel ramp up coming shortly 💪

[@ninaaa530]

I love that you said the numbers in the preset slider were horrible LOL because they are--- tysm for the great tutorial :)

[@ozenuaoluwatobi]

Great video, really helpful

[@nikola9867]

Dude, this was amazing, thanks! The only CMS slider tutorial that worked in the end! 🙏 Quick question: Could you please provide guidance on how to place two sliders on the same page?

[@GregDolan]

Great video, thanks a million for showing us what's possible with the native slider and a few extra bits of code. Would you ever consider sharing your handy notion collection of code snippets?

[@wearestudiotonic]

Haha that’s a good question. Maybe one day. At the moment it’s a little bit like the ramblings of a crazy man who’s been locked in a basement for years. We’ve got lots of plans for the future here so I’ll add this to the list. Glad you got something out of the video 👍

[@callu6528]

sooooooooo good! can't thank you enough. simplest way i found on youtube, i always dodged using the webflow slider because of how raw it looks, but this just takes it to the next level

[@wearestudiotonic]

You’re welcome. Although Swiper is like 10,000 x better than this and we are getting hooked on it over here!

[@callu6528]

@@wearestudiotonic hey, thanks for the reply! Since you're there, maybe you could help me a little further 😬 When i use more than 1 slider on the page, it displays all the slides on the same slider, and the others are empty. Do you know why this is happening? (i'm using the same collection list on all of them, just for testing) thanks!!!

[@wearestudiotonic]

@callu6528 there’s documentation on the Finsweet attributes about having more than one slider on the page. They just have to have different attributes like slider-1, slider-2 etc

[@callu6528]

@@wearestudiotonic woww, now it works, buuuutt... 😂 the arrows only work on the first one 😭😭😭 driving me crazyyyy, do i have to add attributes to the arrows too? any insights? thanks a lot, you're a life saver, fr

[@wearestudiotonic]

@callu6528 check the code for the arrows, the arrows point to a specific slider using the ID of that slider. So you’ll have to give each slider a different ID, and then duplicate the arrows script and update the ID in there

[@DerkVisser1995]

Hero!

[@wearestudiotonic]

😎 Not all heroes wear capes

[@gabrieldelman1928]

great video, mate! thanks! i'm trying to build this but in mobile version the slider doesn't show all the steps till the end. before reaching the last slide, it returns to the beginning step. can you help me fixing that? thanks!

[@hmbhargavarajeurs3620]

Hey, Great Video!! I have four slides and I wanted an infinite autoplay slider. It's working fine and I have the same design layout as yours. But, the issue is I have an empty space when the last slide comes and it takes micro seconds to display the first slide but that huge empty space doesn't look great. Do you have any method to overcome this?

[@wearestudiotonic]

Annoyingly not with this method no. You’ll be able to achieve this using Swiper.js. There are some good tutorials around for setting this up with Webflow.

[@user-ps6to1tk2x]

hello can you help my question is can we add two sliders in one page ?

[@KatieM-ix1jw]

Is there a way to make the end of the slider continue to the beginning (looped)?

[@wearestudiotonic]

Hey, I’m afraid not. This is more of a simple, quick and easy way to achieve it. To make it infinite I think you need to use Splide. If I come up with an easier solution, I’ll keep you posted.

[@user-ps6to1tk2x]

can we add two sliders in one page ?

[@rakeshg9057]

Its not visible even at full HD 1080p. Plz record screen at lower resolution 1080p

[@00doblecero]

can you create it without CMS?

[@laligaghasarkissian4515]

Great stuff, one question though - how does this look on mobile? does it have the same functionalities?

[@wearestudiotonic]

Hey, I show how it works on mobile at around 21 mins in 👍

[@laligaghasarkissian4515]

oh i completely missed it. thank you@@wearestudiotonic

[@user-ps6to1tk2x]

hey this was helpful., but screen was shrinking like scrolling horizontal what we do ?

[@wearestudiotonic]

Can you explain differently please? I don’t understand. You could take the cloneable from the description which should help.

[@user-ps6to1tk2x]

Do you have telegram @@wearestudiotonic

[@user-ps6to1tk2x]

I build same slider2 but horizontal scroll bar is present i dont want that can you help ? @@wearestudiotonic

[@user-ps6to1tk2x]

Solved issue . Thank you @@wearestudiotonic

[@haripriyachittari7976]

Hi, Great Video, How to remove those dots below??

[@wearestudiotonic]

Thanks. Just find the slider navigation element inside the slider and set its display property to none

[@KatieM-ix1jw]

How can you do this without CMS?

[@wearestudiotonic]

Hey sorry for such a late reply. You can simply leave out that step. Just put your content into the ‘slide’ layer, then in the settings of the slider, you can add more slides, and then simply copy and paste your content from one slide to the next.

[@brentdavidson1]

the jquery code will NOT run in webflow's preview mode. You must publish to check functionality as he does here. ...wasted 25 min on that one! lol

[@wearestudiotonic]

Lol, oh man! Guess you’ll only make that mistake once though…

[@JoepSwagemakers]

This is not custom, this is styled..