Learn how to add custom next and back arrows to webflow slider
Have a unique layout using a Webflow slider and need some next & back buttons that you can position anywhere? By adding custom arrows to your slider, we can avoid the limitations set by the default webflow slider arrows. In this short guide, we will simply hide the default arrows, and use a small script to communicate with our new buttons. Let's get started.
To add this into your project, ensure you add the provided code into your custom code settings.
The first thing you'll want to do is hide the default slider arrows. Don't delete these, just change the display to hidden.
Now let's build some custom arrows. Get creative and build these in any position you like. Here's our arrows. Just make sure you have a Left / Right arrow. We communicate with these arrows through class names.
Make sure you add the class to these next and back buttons to communicate with the scripts
Next Button - 'next-button'
Back Button - 'back-button'
Now let's give the slider a ID tag so that the script knows where to target. In this case our ID is 'flowbaseSlider'
Add the following script into the Before </body> tag of your custom code settings.
Learn how to add a beautiful countdown to your Framer project. Add it to your project in seconds
In this article we will spotlight the best way to build a beautiful Instagram feed in your Framer sites. Built specifically for Framer and 100% free for small and personal sites.
Learn how to add a beautiful before and after image slider to your Framer projects. Customize all aspects including handles and labels directly in Framer.