19 Free Webflow Slider Cloneables

Robert Jett
July 4, 2022
Try Memberstack for Free!


Add memberships to your Webflow project in minutes.

Try Memberstack

Over 200 free cloneable Webflow components. No sign up needed.

View Library

Add memberships to your React project in minutes.

Try Memberstack

Sliders are a basic but powerful tool in Webflow, providing an aesthetically pleasing way to display visual and textual information on your site. Perfect for e-commerce businesses wanting to display products, creatives trying to showcase their portfolios, or anyone hoping to save space on their landing page, sliders should be a part of your suite of web design tools.

Webflow Sliders

How Do Sliders Work?

In Webflow, slider components have four children elements: a mask containing the slides, left and right arrows, and a navigation menu (often along the bottom of the slider). Slides themselves function similarly to div blocks or containers in that they can contain other elements, often images and text.

For a quick review of how Sliders work natively in Webflow, you can visit this link. However, with a little bit of extra code and some creative design tricks, sliders can take on new life in your projects. Below, I’ve highlighted 20 slider cloneables, many of which make use of specially-designed JS libraries, that take the component to the next level.

1. Slider-dash


If you want to display a variety of images in a sleek and visually engaging way, this slider-dash template is a great option. Using a bit of custom CSS, slider-dash from Riley Richter gives you the ability to customize the appearance of both the navigation bar and the slider arrows. Custom code included in cloneabale link.

Custom-styled slider using CSS with added custom cursor image for the next and previous arrows

2. Canvas Slider


This custom slider from CJ Hersh gives viewers the ability to drag the screen between slides, shrinking and enlarging images depending on which slide item is in focus. It uses some custom CSS and JS and images and URLs can be replaced by modifying the <li> and <ul> attributes on each list item.

Canvas Slider

Note: this slider effect will only appear on the published site.

3. Tabs-slider


The tabs-slider template from Redleo combines the functionality of tab components with the aesthetics of sliders, allowing you to create custom full-page sliders with unique backgrounds and content. This design from Redleo requires no custom code, using the native slider component, tab settings and element triggers.

Tabs-slider combining functionality of tab components with aesthetics of sliders

4. Custom Double Slider


This double slider, created by SketchzLab, uses a custom button to trigger two hidden slider transitions simultaneously with a single click. This gives you the ability to have two directional transitions happen at once, giving you a sleek way to present multiple kinds of content at one time.

Cstom double slider, using 2 slider elements that will change by a single onclick event from a custom button

5. Custom Slider


This custom slider by Avivtech gives you a stacked, full-page slider display. With this slider template, you can give a more immersive visual experience to your users. This slider was built entirely without custom code, making use of the native slider component and element triggers. 

Custom full-page slider display

6. Swiper.js Slider


Swiper.js offers a robust suite of highly customizable code, written in JS, for sliders. With this template from Timothy Ricks, you can modify not only the appearance of each slide but also the appearance of the transition buttons and the slider items. In the example below, Swiper.js was used to place and size the slider items, customize the slider buttons, and modify the progress displays along the bottom.

Modifiable Swiper.js slider

For an in-depth look at how you can use Swiper.js, check out this video from Timothy Ricks. To learn more about the Swiper.js project as a whole, visit https://swiperjs.com/.

7. GLSL Slider


This slider template from Jakob Wrs makes use of OpenGL Shading Language (GLSL) to give you an extremely unique way to transition between slides. Images and transition settings can be modified in the custom code included before the </body> tag (in this template the images use the const paintings). 

High Performance GLSL Slider

To view the original code used in this project visit this linkNote: your computer must support WebGL to display this transition. Additionally, it will only appear on the published site (and not in the site preview). 

8. Card Slider Using Slick Slider Library


This card slider template lets you put CMS data or static information into a slider component with customizable navigation features and filter categories. Also built using the Slick Slider JS library, it offers a clean way to display information from a CMS collection list.

Full width card slider using slick slider library

9. Slide, Scale, Blur


This slider template from SketchzLab adds a new layer to the slide transitions, focusing, scaling, and darkening the selected slide item and blurring all other items. A FAQ and other documentation can be found on the cloned site itself. 

Custom slider transition changing the size and focus as the slide changes

10. Hero Slider


“Hero animations” are a transition technique where the edge of an image “flies” across the screen to transition to the next. This hero slider template from Aaron Grieve uses native Webflow functionality and some jQuery to give a full-screen transition between both images and text.

Hero slider using native Webflow functionally

11. Custom CMS Animation


This beautiful full-screen slider provides an easy way to automate the creation of sliders on your site. This template from Johnathan Haring dynamically adds and removes slides based on the content of a CMS collection list.

Custom CMS animation

12. Product Slider


This sleek product-focused slider from Flowbase provides an easy way to highlight featured products and incorporate product information and action buttons directly into the slider display. This slider uses custom code to modify the positioning and appearance of the slider arrows. 

Product focused slider

13. Testimonial Slider


This testimonial slider, also from Flowbase, lets you show customer testimonials alongside customer photos. A guide describing how to customize the slider arrows is provided on the cloneable link above.

Testimonial slider with customer photos

14. Vertical Split Slider


This unique vertical slider from loicbaumea offers a vertical version of the traditional slider display. Splitting the image widthwise, the two halves move opposite one another when the slide transition is triggered. It also features custom code which allows the slider transition to be triggered with a scroll in addition to the slider arrows at the top and bottom of the screen.

Responsive slider splitting vertically, with custom code to change slides by scrolling

15. T.RICKS Menu + Slider


This advanced slider template, another from Timothy Ricks, offers a visually stunning way to display visual information and content in a three-dimensional slider display. This uses the Splide JS and anime.js libraries, as well as Webflow’s “wizardry technique” to build in robust functionality depending on whatever your project requires.

Advanced slider template, using the splide jS and anime.js library

You can view a video tutorial for setting up this template here. For more information on the Splide.js library, click here and for more information on anime.js click here.  

16. CMS Pricing Slider


This functional slider from Timothy Ricks gives visitors to your site the ability to toggle numerical choices on a sliding scale. Using a bit of JS before the </body> tag, it gives you the ability to represent numerical information to users in an interactive way. 

CMS pricing slider with ability to represent numerical information in an interactive way

17. Overlapping CMS Slider


This cool slider template from Timothy Ricks allows you to link CMS collection lists to overlapping card-like slide items, which can be stacked by interacting with the slider arrows. It works by using some code before the </body> section which can be customized to change the appearance and functionality of the site.

Overlapping CMS slider

18. Simple Snap Scroll


The vertical scroll slider from Dominik Fojcik displays information on a full-page view that snaps into place. It uses the FullPage.js library and requires custom code inside of the <head> tag and before the </body> tag.

Simple snap scroll vertical slider

For more information on the FullPage.js library, visit this link

19. Direction Aware Slider


This advanced template from Kevin Haag uses the placement of the mouse within a slider to trigger the appearance of the slider arrows and to modify the appearance of the focus image. It requires some custom CSS embedded on the page and a little code inside of the <head> tag and before the </body> tag.

Direction aware slider