Discover the best swiperjs websites created by professional designers. Get inspired and start planning your perfect swiperjs web design today!

Flow Ninja

We've been thru all slider libraries with more than 100+ sites in the past, and in the end decided that the Swiper Library works best for our use-cases. 

Explore 8 slider options to add to your next Webflow project and easily connect them to your CMS. Additionally you won't have duplicate content on your page, as you're connecting Swiper library directly to your Webflow CMS collection.

Swiper Flow Ninja

Webflow CMS Swiper Sliders - Free Cloneable

Watch tutorial 1 at https://www.youtube.com/watch?v=Qn1qL3TGMug
Watch tutorial 2 at https://www.youtube.com/watch?v=OCvFPcFmlUk

Swiper.js

Starting the week off right with our new e-commerce pizza store concept!

GOODROOT is a boutique quick-freeze pizza brand with high-quality food ingredients and creativity. 


Branding concept & assets created by Low Key Design (https://www.behance.net/lowkeydesigncompany)

Goodroot Pizza

GoodRoot Pizza E-Commerce Homepage

Scroll Snapping Slider

Swiper.js Slider

Swiper.js Infinite Scroll

Swiper Controls Background Text

Thanks Tim for the Inspiration - check out his patreon! https://www.patreon.com/timothyricks

Swiper

Swiper Inception Prototype

Vinsmoke Farms - NY's finest Cannabis Company.

Want to work with us? Contact: jcs@zorrowebdesign.com

Vinsmoke Farms

Vinsmoke Farms - NY's Finest Cannabis Company

Let's explore how to build a vertical carousel in Webflow with Swiper.js. This slider will snap to the user's scroll and loop infinitely. We'll also have a look at how we can leverage the vast Events API with CSS transitions and GSAP to animate items as they slide into view.

SwiperJS Scroll Snapper

SwiperJS Vertical Scroll Snapping Carousel

Vibrand Design

Howdy Webflow Family, 

with this exclusive Cloneable you get 10 production-ready sliders for your Webflow projects, developed with SwiperJS, the most used, powerful and flexible slider library on the entire web. 

For use in your own projects: 
(1) clone the Cloneable into your dashboard, 
(2) copy the slider of your choice into your project
(3) add the corresponding codes (which you can get via Patreon or from 03 May via Lemon Squeezy) to your project and 
(4) customise the component as you want it for your project.

Have fun impressing your users and customers with these sliders. :)

- Dennis from Vibrand Design

++++++++++++++++++++++++
Support our work and get the editable JavaScript Code on Patreon 👉 patreon.com/denniskarg 👈 or via Lemon Squeezy 👉 https://denniskarg.lemonsqueezy.com/checkout?cart=87829656-c643-4c01-ade9-199018baece6 👈

SwiperJS Starter

Martin | made by Lumen

Native Webflow slider is very basic and lacks a lot of features. That's why I've been using SwiperJS for all my projects for over two years now. I've been using this exact template for over a year now, but now decided to put it up as a cloneable.

You can enable and disable certain slider components that auto update in the code that's provided in the project.

Learn more about SwiperJS on swiperjs..com
The custom code and structure provided is just one option to get the SwiperJS sliders integrated, but you can check out more options on their website.

I am using the previous version of SwiperJS (Version 8 instead of 9) due to some bugs I've encountered, but I'll update it once I feel it's working as it should.

Looking forward to creating a Youtube tutorial on this topic with cloneable as a demo, when I'll find time for it!

SwiperJS Sliders

sliders-swiperjs

Very basic but smooth cover flow effect using swiperjs

Swiper Coverflow

Coverflow Effect using Swiper JS

A slider + tabs component that uses Swiper.js to allow users to navigate via either a tabs style UI, or traditional slider arrows. The tabs UI is set to act as custom thumbnails to the base slider on the right.

Swiper Tabs Slider

Swiper Tabs Slider Component

Overview: Ledger Nano X is a product I used since 2016. I loved the project & decided to redesign the landing page 8 years later. For that I used scroll-trigger similar to what is used in Apple. The site received an award on Behance. 1 year later I began giving this project as a test to developers coming wanting to get employment at our agency, all of whom failed it & could not acomplish within 7days. I decided to give it a go & completed it in 14h.

Features:  
1. The navigation was used with vanilla JS & some CSS 🔥 
2. The logo is embeded as SVG & animated through CSS 🔥 
3. Custom CSS for hover interactions 🔥 
4. Ukiyo Parallax Library 🔥 
5. Apple like scroll-trigger done natively in Webflow 🔥 
6. Auto rotating tabs using Webflow JS + JS 🔥 
7. Swiper slider (Swiper.JS) 🔥 

Ledger Nano X

Swiper JS with a callback function that is triggered when the active index changes, which then updates the label and color of the heading with the corresponding attributes of the active slide.

This component is something I needed for a website I worked on recently and I am sharing it here with the community in case y'all needed something similar for your projects.

Swiper JS with a callback function

swiperjs-callback

Quick Live Demo for a subscriber. This is the same build as my infinite vertical scroll snapping swiper BUT once you scroll past the slider we remove it from the DOM so user can't scroll back to it.

Swiper JS Scroll Snap Transition to Content

Scroll Snap Swiper WITH Follow-on Content

Discover a captivating collection of vintage baseball cards with an interactive slider powered by swiper.js. 

Discover swiperjs websites built by the Webflow community

Discover swiperjs websites built by the Webflow community