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

https://showcased.webflow.io/projects/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.

2. Canvas Slider

https://showcased.webflow.io/projects/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.

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

3. Tabs-slider

https://showcased.webflow.io/projects/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.

4. Custom Double Slider

https://showcased.webflow.io/projects/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.

5. Custom Slider

https://showcased.webflow.io/projects/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. 

6. Swiper.js Slider

https://showcased.webflow.io/projects/Swiperjs-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.

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

https://showcased.webflow.io/projects/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). 

To view the original code used in this project visit this link. Note: 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

https://showcased.webflow.io/projects/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.

9. Slide, Scale, Blur

https://showcased.webflow.io/projects/slider-custom-transition-change-slider-size-and-focus

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. 

10. Hero Slider

https://showcased.webflow.io/projects/027-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.

11. Custom CMS Animation

https://showcased.webflow.io/projects/custom-cms-slider

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.

12. Product Slider

https://showcased.webflow.io/projects/product-slider-clone

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. 

13. Testimonial Slider

https://showcased.webflow.io/projects/testimonial-slider-custom-slider-arrows

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.

14. Vertical Split Slider

https://showcased.webflow.io/projects/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.

15. T.RICKS Menu + Slider

https://showcased.webflow.io/projects/TRICKS-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.

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

https://showcased.webflow.io/projects/CMS-Pricing-Slider-l0isx3jn

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. 

17. Overlapping CMS Slider

https://showcased.webflow.io/projects/stacking-cms-slider-ktvsm6ak

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.

18. Simple Snap Scroll

https://showcased.webflow.io/projects/webflow-scroll-snap

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.

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

19. Direction Aware Slider

https://showcased.webflow.io/projects/mm008-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.