The Top 108 Slider Webflow cloneables

Add a progress bar to your draggable CMS slider sections in Webflow. Typically most draggable, or third party sliders, don't offer a progress bar indicator. Using the power of Dragdealer.js you can now add a progress bar and draggable CMS slider to your Webflow site. Please note that you'll need to add the global styles HTML embed as well as the custom script found in the closing body tag within the Page settings for this to work properly.

A beautiful Swiper.js overlapping cards slider built for Webflow. This Swiper.js slider is perfect for a hero section or features section of a site. When a user navigates between slides the top card is removed and the next card in line comes into view. The cards are stacked with various offsets so it looks like playing cards. There are text transitions for each text associated with the slide. This slider was created using Swiper.js and utilizes Webflow's native CMS collections. This allows you to dynamically generate slides based on the collection list items. This requires custom code so be sure to look at the pages custom code for the Swiper.js code. You can modify the Swiper.js code to include grabcursor, looping, and utilizing arrows to navigate between slides.

Here's a basic example of utilizing Swiper.js for a slider within your Webflow site. Swiper.js is great for adding a draggable slider with a variety of effects within Webflow.

Looking to add a dynamic image slider that can change based on categories? Here's way to add a dynamic image slider driven by Webflow CMS that can be filtered by categories or links of your choosing. The amount of slides is determined by the amount of images added to the multi-image field within collections.

A 3D Splide.js CMS draggable slider for Webflow. This 3D draggable slider created with Splide.js allows you to integrate Webflow's native CMS solution with Splide.js to create a dynamic and interactive slider with Webflow. The slider features navigation arrows and the ability to drag between each slide item, perfect for desktop or mobile. There's also a 3D effect with the slides entering and exiting the viewport. The Splide.js slider allows you to customize the number of items per page, per move as well as various break point functionality for mobile responsiveness. You're also able to modify the delay, duration and easing in and out. This example is infinite looping so that there's no beginning or end and the users can navigate endlessly between each individual slide that is powered by Webflow CMS.

Explore techniques for implementing unique Webflow CMS sliders via Swiper.js. Flow Ninja built 8 different slider options including a basic slider, a thumbnail slider, infinite loop swiper great for client logos, auto height, pop-up modal sliders, grid sliders, vertical sliders and a number pagination slider. These prebuilt Webflow sliders utilize Swiper.js to operate correctly so it's important to add the code implemented in the head tag and closing body tag found in the Page Settings for this to work properly.

Add custom CMS slider with stacking and overlapping cards.

An infinite slider design for Webflow built using Webflow's native slider and interactions. This fully responsive Webflow slider features unique hover over interactions in which the next and previous navigation appears only on hover. The slide continues endlessly by looping to the starting slide upon finishing the rotation.

A complete Splide.js CMS slider solution for Webflow. Splide.js offers a great solution over Webflow's native slider solution. Lightweight and mobile friendly this slider offers four different designs and implementations, including a Webflow CMS slider solution using Splide.js. This technique does require custom code that you'll find within the page settings, custom code area. Using this solution you can update the number of items per page, the number of items changed per slide, infinite looping, pagination, speed, drag threshold and much more.

Add a CMS driven draggable slider with smoothing to your Webflow site. This slider offers the ability to slide with a trackpad and also has mobile smoothing. There's a small webkit code that removes the scrollbar as well.

Add Trustpilot reviews to your Webflow site with this premade Trustpilot review slider. This slider was built using Finsweet's client first and uses only SVG images for the icons. A great way to add testimonials and reviews to your Webflow site.

Here's a way to have Webflow's native slider adjust to the height of the contents within each slide. This allows you to dynamically change the size of the slider based on the height of each slides content rather than having the content adjust to the height of the entire slide module.

Here's a way to add a parallax slider to your Webflow site. You can navigate the slider via dragging or using your arrow keys.

A stunning and easy to implement Swiper.js draggable slider created for Webflow. This slider is completely draggable for both desktop and mobile devices, when the next slide is triggered there's a slide in feature that is powered by Webflow interactions. This makes the next card appear to slide in upon being visible. Swiper.js powers the slider and allows for custom functionality such as speed, looping, breakpoints and much more. Keep in mind that this utilizes data attributes to work properly so you will need to update each slides data attributes in order for the Swiper.js functionality to work properly.

Here's a way to create a slick slider type of slider within Webflow.

A set of unique and interesting image slider transitions including distortion and warping effects made with WebGL. The code was modified to behave as bidrectional looping slider. This works on both desktop and on mobile.

A beautiful example of a horizontal slider created with GSAP for Webflow. As the user scrolls through the site it smoothly transitions to a horizontal slider. This slider was built using GSAP & ScrollTrigger.js and you can find the custom code in the page settings. This is not setup to use Webflow CMS although it could be modified if you have an understanding of GSAP and code. The horizontal scroll can be modified to adjust the scaling of the image, rotation and much more. Be sure to check out this horizontal slider if you're looking to implement a GSAP variation on your Webflow site.

Here's a unique way to add transition animations to a full screen slider. Using both Swiper.js and a GSAP animation script.

A multi-column, fully fluid responsive card slider for Webflow. The starting cards are left aligned while the final card is right aligned. The slider mask is set to percentage based width varying on the number of cards in the slider. This way you can control the number of cards shown depending on the size of the screen.

A Webflow slider created with SplideJS tied into Webflow's native CMS system. This slider features a draggable slider with a progress bar. In order to get this to work properly you'll need to add the HTML embed splide code as well as the code found within the page settings.

A demonstration of using Swiper.js in a hero section. This is also mobile friendly by becoming full-width.

A high quality CMS Swiper.js slider that's perfect for your Webflow site. This slider features a draggable list of items driven by Webflow's CMS collections. When the user clicks on one of the items it expands the card into a full screen view and provides additional information about that card. This is perfect for pages in which you want to keep the users on the page but need to provide additional information about that slider item. As mentioned this utilizes but also uses GSAP, CustomEase.js to complete this interaction. The custom code can be found in the page settings and uses cookies to store visited information. This is an advanced slider solution and I'd recommend this only to people familiar with coding, Javascript and GSAP & Swiper.

Here's a beautifully designed rotating testimonial slider in Webflow. A great way to build trust with your prospective clients. This testimonial component will auto slide between your testimonials with a smooth transitioning effect.

An excellent example of Swiper.js for Webflow CMS items. This example is perfect for a hero section, or any Webflow slider that wants to be upgraded to utilize Swiper.js. This demo includes scroll interactions, in which each card is changed upon scroll up or down on the mouse and also includes next & previous buttons to navigate between slides. Each slide changes the thumbnail previews of each slide, updates the slide active and slides the text of each slide. The thumbnails and text titles allow you to navigate between each slide as well. This script utilizes Webflow CMS, allowing you to utilize Webflow's CMS items in your native Swiper.js slider. Keep in mind that this utilizes Webflow's custom code section and you'll find the relevant code within Webflow's page custom code settings of this Webflow cloneable.

This is a unique way of adding Curtain.js WebGL slider to your Webflow site. This allows for a variety of transitions and change effects not available to the standard slider. This is based on Curtain.js and is fully customizable in both shape and size, it's also responsive behaving like CSS cover. There are many options from autoplay to buttons, transition duration, displacement maps and even pixel distance, built in easings without libraries.

A custom CMS product slider for your Webflow ecommerce site. This custom CMS slider offers more functionality and a different approach than standard sliders. Product images are referenced by the URLs o it can be used to populate images from other sources rather than Webflow directly. Each slide offers a different transition as a well as different color options per product. Perfect for sites with different colors in per product. Be sure to add the custom CSS and JS found in the Page Settings body/heading sections for this to work properly.

Add a unique circular slider to your Webflow hero. This demo showcases a circular slider with animated panels via the background. These panels were created in Adobe After Effects and triggered via a slider element within Webflow. The main slider is also linked to a secondary slider that showcases the text. The sliders were then linked together via custom code.

A custom, full page slider for Webflow created with custom dots and transitions that displays the active slide number. The entire slide is based on Webflow's native CMS system, Webflow's native slider and a bit of custom CSS and Javascript to tie it all together. Please note you'll need to add the custom code found in the page settings (header/body) in order for this to work properly.

A unique Webflow slider created with Three.js and GlslCanvas. While this is a good example of a slider it uses hand coded image URLs rather than Webflow sliders. A good demonstration of how to add Three.js slider effects to your Webflow site but will need some customization to make it work properly on a Webflow site.

Here's a way to create a multi-step Webflow form that includes a step counter, custom confirmation animations and custom checkboxes. A perfect way to filter leads, create long forms that are filled out, and segment your lists/clients.

A simple, yet complex image slider with a transition effect. This utilizes Splide.js, Anime.js custom JS for the link delay.

Here's a way to add a simple horizontal scrolling cards section to your Webflow site. The cards are designed for horizontal scrolling on desktop and tablets and vertical stacking on mobile. Since this was designed using Flexbox, you can add/remove cards and the scroll will still work. Although you'll likely want to resize the scroll track if you use a lot of cards. Each card can have a background video added to the card for a neat reveal on hover effect.

A simple way of adding a CMS driven stacked slider to Webflow using addClass and removeClass jquery code that is fully responsive. This opens up a new way of adding a 3D stacked effect for your native Webflow sliders.

A beautiful example of a Splide.js Webflow slider that features a variety of features in a beautiful design. This slider offers navigation buttons (previous/next), fading out of the person image that isn't active, text description fade in on current active item and more. This example utilizes Webflow's native CMS collections which helps make this even more expandable and future proofing for you or your clients. This example also features infinite looping so that no matter the number of slides users can navigate endlessly through the items. With Splide and this example, you can customize a variety of options such as perPage, perMove, focus, the gap between items, arrows, pagination, the speed that the slider changes items, the dragthreshold, rewind speed and individual breakpoint styling effects. Keep in mind there is some custom CSS that you'll need to add as well which can be found in page settings and via an embed.

A CMS driven range slider that updates the price based on the selected range in Webflow. This pricing range slider is connected to Webflow's native CMS system. Note that this requires custom code within the Body close tag section to work properly.

A unique slider that provides functionality support not found in my other sliders in Webflow. Including responsive, swipe gestures, keyboard arrows. Easy to customize simply copy and paste the slide item to add more items. Place content within the content wrapper. This slider utilizes Slick Carousel to create the slider and thus requires you to add the custom JS code found in the closing body tag.

A great example of a CMS slider with custom navigation arrows that are designed within Webflow. It also features a dropdown to filter the slides. This uses the slick slider JS library.

A great way of adding a slider component with a splitscreen gallery slideshow that automatically rotates a collage while animating each slide with it's own transition. View the tutorial here: https://youtu.be/IvxswB5jy-w

A unique GSAP velocity based interaction demonstration for Webflow. When a user drags the slider the items react based on the velocity of the drag on the slider. A unique interaction that adds a new dynamic layer to a normally static style draggable slider. Take note that this utilizes GSAP and Observer.js to work properly and you'll find the custom code within the custom code page settings. In this you can update the attributes of the velocity such as the velocity, and CLAMP. You can also adjust the rotation amount, duration and easing used. This is a mobile friendly and desktop friendly slider solution that utilizes the power of GSAP and Observer to work with Webflow's native CMS collection lists.

Three different stunning Swiper.js carousel sliders built for Webflow. The first variation contains a draggable bar, slider dots to indicate which slide is currently active and slider arrows. The second variation features a dark themed variation of the first version. The third is a larger variation of the other two. These designs are all setup for Webflow's native CMS collection so that they can tie into your preexisting CMS items. As mentioned you will need to add the custom script found in the page settings. With this Swiper.js slider you can customize the looping behavior, slides per view, the slides between groups, space between, mousewheel, the transition speed, mobile responsive break points and its actions. You'll notice that classes are associated with many variables in the code, so be sure to use those or update them to your own.

An easier way to create custom slides in Webflow. Includes animations with static elements or CMS collection lists. This is powered by SlickJS, allowing you to use all of the slider functionality offered without writing any code.

An infinite diagonal parallax slider for Webflow that's draggable or can be changed via arrow keys.

A custom slider that changes the size and focus of the slide after it changes to the next slide. Perfect for emphasis on the main slide while maintaining a transition effect for the other non-primary slides in Webflow.

Here's a way to add an infinite, transparent slider to your Webflow site. An easy cloneable that you can copy and paste to your site and have it setup and running in no time.

Here's a unique vertical split slider that with split transitions between slides for Webflow. A great way to add a responsive, unique slider effect for a full page or section on your site.

A stunning, beautifully designed hero section for Agency's created in Webflow. This unique and free hero section includes custom cursor with masking effects, full screen slider with custom navigation dots and slide change transitions and a full screen hamburger menu.

A custom WebGL draggable slider with 3D effects in Webflow. This is a very unique and cool effect to achieve a 3D expand and collapse between transitions on your Webflow site. You can update the text, links, and images in footer via the page settings. Easily modify the effects speed, frequency and more in the footer via the page settings.

Here's a wonderfully designed full section testimonial slider for Webflow. Each slide has it's own transitions as well as custom slider arrows using Webflow's native slider. Perfect for adding a testimonial section to your Webflow site.

Five unique designs to showcase your Instagram feeds in Webflow. These examples utilize a combination of custom code and Webflow interactions to make the magic happen. Although a majority of the movements are controlled by Webflow interactions. A great way to liven up your Instagram feeds on your Webflow projects. Tie this into automating the importing of your Instagram feeds to Webflow using Zapier or Make and this can be a fully automated and up to date instagram feed.

Here's a way to achieve a dual slider effect in Webflow. When clicking on the next or previous two different sliders will be triggered via the single onlick trigger via a custom button. This clicks on two hidden slider links simultaneously allowing you to maximize the slider transitions and effects.

An amazing full page multi image slider for Webflow. This slider is built with great interactions and transitions and loads multiple images per slide. Perfect for portfolios, architecture images and much more.

Here's a large testimonial slider component with auto-transitions for Webflow. This smooth transitioning testimonial slider is perfect for any Webflow site. It transitions smoothly between each testimonial and provides unique interactions. This demonstration also includes the possibility of a video as well.

A modern and yet sophisticated multi-step quote request form for Webflow. This multi step form features a status indicator for which step you are currently in with the form. The form was created using Webflow forms and embedding various native Webflow sliders within the Webflow form. This method does NOT require any extra custom code or HTML embeds to work properly and is a perfect starting point for any multi-step form. The form utilizes checkboxes for large options on the second portion of the form, there are also custom designed radio buttons, and a final confirmation page to submit the form. Overall this is an excellent cloneable if you plan on adding multi-step forms, contact forms or questionairre's/onboarding pages for your Webflow site.

Here is a way to create dual snapping cards on scroll in Webflow. When you scroll both cards snap into place, the slides change with an interesting reverse scrolling effect. Position sticky and Webflow interactions give the illusion of a snapping effect.

Range slider examples created for Webflow. These range sliders allow you to capture price ranges for your form inputs and specific amounts as well. These demonstrations can be easily edited to suit any amounts or styles based on your own specifications. The sliders are built using custom code found within the page settings so be sure to add the code to your site in order to work properly.

A free widget to display your customers Trustpilot reviews and feedback, or other feedback and reviews to your site via a slider element.

A dark themed slider for Webflow created using Spide.js. Splide is a lightweight, accessible and more importantly flexible slider written with TypeScript. This requires no dependencies and has no Lighthouse errors. In order to get this to work you'll need to include the CSS stylesheet and JS found in the Page Settings custom code section.

A native Webflow CMS driven slider that uses Splide.js to create unique next/previous buttons and transitions. Splide.js is a popular slider alternative that many Webflow designers use to customize their Webflow sliders beyond the capabilities offered via the standard slider functionality. Be sure to add the custom code found in the page settings for this to work properly.

A pricing/quote calculator slider built with custom Javascript for Webflow. Here's a great way to add a custom pricing quote with a slider and forms to create an accurate pricing quote for your clients in Webflow.

A unique way of adding a CMS driven draggable slider to Webflow with background videos playing on hover.

Fourteen different testimonial components perfect for your Webflow site. These modern and well designed testimonials were created to help you add a testimonial section to your site quickly. The first variation has testimonials featured in an off centered design, the second variation showcases a simple 3 design with a primary quote and user avatar. The third variation is a large slider perfect to include a larger testimonial section to your site. Other variations included branded colored cards in a slider, a picture of the person with their company logo over their face, a large centered slider, a twitter card style, a video testimonial, tab testimonials and many other variations. This is a perfect cloneable if you wanted to add simple or complex designed testimonials to your site.

A beautiful, draggable slider for your Webflow site. Some notes about the draggable slider, in mobile view it uses hammer.js for the slider. Images can be updated by changing the attributes found in each <li> item>. The view details URLs can be updated the same way. You can also change the view details and view project by changing the data-video to false. If you want it to say something else you can dive into the code and update that way.

Here's a way to create a tabbed style slider for Webflow with unique transitions. The previous and next slider buttons are removed and each of the sliders are numbered. Upon clicking on the next number the text and images are slid in via a unique transition. Perfect for changing the way that your slider can be built and displayed within Webflow.

Another beautifully designed, full page custom CMS Webflow slider. This custom Webflow CMS native slider uses custom JS with zero dependencies. It does offer basic responsiveness but may need to be customized based on your own specifications. Please note you will need to add the custom JS code found within the body section of Page Settings for this to work properly.

Want to compare two products or images on your Webflow site? With this cloneable you'll be able to add an image comparison section to your Webflow site. This is perfect for product comparisons, service comparisons and much more. Please note that this utilizes Beerslide.js so you'll need to add the custom code found in page settings for this to work properly.

Three different testimonial sections for your Webflow site. These free testimonial sections include two slider designs and one non slider to feature testimonials on your Webflow site.

Before and after slider animation with pure animation Webflow interactions. You only need to replace the background image for .before-image and .after-image

A unique slider animation interaction for your Webflow site. Upon next slide the transition zig zags each slide and loads in the next slide with the same animation.

Want to add a range slider to Webflow? Here's a way to add a range slider inside Webflow using Finsweet's Attributes. This slider can be used for either forms or filters on your Webflow projects. Please note that you'll need to add a custom JS library found within the head tag in order for this to work properly. Also check the documentation in order to ensure you've set this up correctly.

Add a stacking slider as inspired by houseof.world. This adds a fun, 3D effect to your sliders that transitions and moves the cards forward, and to the back upon next slide.

Here's a way to create a custom automatic slider for the hero section of your Webflow site. This was created with the native slider component and Webflow interactions.

Here's a fully responsive, full page slider with diagonal transitions. Here's a great way to add dynamic slider animations and interactions to your Webflow site slider.

A custom slider transition that zooms into the next slide for Webflow. A great way to customize the boring slider transition and adding a unique flair to your sliders.

A bouncing, parallax effect draggable slider for Webflow. When you add this to your Webflow site you'll be able to create a dynamic, parallax style bouncing effect to your Webflow slider. The native slider is left intact so you should be able to integrate native Webflow based scroll interactions. This does not work on mobile devices. Consider Webflows native slider for mobile.

A fully dynamic hero slider that's responsive and includes a vertical slider that switches out the primary heros image. This was built entirely with Webflow, some CSS and Webflow's native interactions. At the top you'll notice a horizontal marquee, this is powered by custom CSS which you'll find via an HTML embed. You'll also notice an extensive use of Webflow native sliders and a variety of individual interactions for each slide change associated with each and every slider. A very extensive use of Webflow sliders and interactions. This hero slider does not use custom code within the page settings so you'll want to dive into the HTML embed and then the Webflow interactions which make this entire thing possible.

A custom javascript solution to a CMS stacking slider in Webflow. This custom Javascript CMS driven stacking slider works great, although may be a bit confusing for beginners. It utilizes custom Javascript and utilizes Custom attributes in order to work properly. When a user clicks on the next item, the text description in the header changes and the next image is shown. This requires two different CMS collections, one for the content and one for the images. You'll need to add 2 attributes and 1 HTML embed into the CMS collection for the images and utilize the proper class names. Update the slider navigation buttons and assign the custom attributes. Overall this is a great slider but is tailored to someone familiar with Webflow.

Here's a unique way to add a timed automatic slider to your Webflow site. Typically native sliders stop autoplaying as soon as you interact with it, however this version allows it to continue to play even after interacting with the slider. The progress of the slider is tracked via a lottie animation. This is accomplished via native interactions and CSS only code.

A great way to add mouse aware, location aware slider navigation interactions to a slider.

Another beautifully designed hero section for your Agency site in Webflow. This cloneable features a dark/light toggle, a full screen slider with custom navigation dots along with slide number change animation, and a full screen hamburger menu navigation.

A full page hero slider section featuring full page image and text transitions in Webflow. A hero section built for photographers and videographers featuring a stylish 3-column slider with large, modern page loading, and a full screen hamburger menu.

A custom, automatic slider with unique animations on Webflow. It was made with Webflow with custom interactions.

A slick split hero slider design with unique slider transitions that rotate both half of the pages in different directions upon each slide. Perfect for a unique hero section in Webflow that allows for an eye catching and dynamic hero slider section.

Here's a custom advanced carousel slider driven by Webflow's native CMS system. This slider carousel is entirely responsive and within the CMS options has the ability to activate the item to be added to the slider. A wonderful slider with unique transitions and the ability for two images, and relevant descriptions to be displayed.

Here's a fun technique, using a slider with a hover slider to dynamically change the color of a sites background in Webflow. This was all made with Webflow interactions.

A CMS driven hover slider for Webflow. Swipe on mobile or use your mouse to navigate on desktop.

Here's a unique way of showing images, app screenshots or more in an iPhone mobile slider. The images continuously rotate through and infinite loop.

An amazing, sweeping slider interaction perfect for any Webflow site. The interactions have a custom scroll indicator, automatically transitions slides and provides a unique sweeping transition between slides. Perfect for a hero or landing page in Webflow.

Build a dynamic and interactive photography hero section in Webflow easily. The hero section features a 12 slider layout with slides moving in and out in opposite directions, a modern page load animation and a full screen menu design.

A custom slider for multiple images per slide. This allows you to maximize the number of images, or items for each individual slide. Each slide has a transition preview effect and a fanning out animation upon the transition.

Here's a way to showcase several different slides transitioning per click. This is achieved via micro interactions for the previous and next buttons. The interaction for the arrows was created in After Effects and custom code was utilized to trigger multiple slide changes at once.

Here's a clean popup modal that includes a slider for your Webflow site. Easy to implement and with cookies you can display the popup once.

Want to use Tabs with Webflow sliders to show off your products? This cloneable allows you to showcase a variety of products via tabs with sliders on each internal tabbed results. A great way of displaying a large number of products in a small area.

A unique slider animation for the background image on a site. It utilizes the full viewport and provides a unique animation.

A CMS driven menu slider for food related items.

A free cloneable fashion site hero section, perfect for a website or portfolio section. This was inspired by a Dribble and to test out the authors expertise in Webflow. Initially starting the design in Figma, and then translating it to Webflow. For the interactions the author utilized Class Adder via Finsweet and for the text animations utilized a javascript library provided by Timothy Ricks.

A full page kinetic slider for Webflow. When a user hovers over the slides the images the images morph and act kinetic.

Want to liven up the videos on your Webflow site? With this cloneable you'll be able to feature three, full page videos with a unique animation effect. Perfect for portfolio pages, heros or pages that you need to feature more than one video in a dynamic and interactive way.

A unique and well designed Webflow CMS slider created via Slick.js. This slider is driven by Webflow's native CMS and allows unique effects not offered by Webflow's native slider. In this example the slider is draggable, provides unique transition effects that zoom on each primary slide, and displays 3 slides at a time.

A beautifully designed hero section for an architecture firm/business in Webflow. This offers a unique, 3D style pre-loader with a full hero section. The hero incldues custom line style slider navigation, 2 lightboxes in each slide, one for image and one for video, search functionality, hamburger menu and much more.

An incredible, full page slider for Webflow. This custom slider features custom next/previous arrows, slide transitions and text description location all driven by Webflow's native CMS system.