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

Basic example of how to integrate Swiper.js with Webflow.

Swiper Thumbs

Swiper Showcase Example

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

Vibrand Design

Responsive Wheel Slider - implemented with SwiperJS.

Perfect for portfolio or work presentations. 
Copy it, edit it, sell it - the main thing is you enjoy using it.

How to use it:
Copy the elements with the point 🔵 and the head and body code from the page settings.

You want more?
Just tell us what kind of component or layout you'd like and we'll build it for the community.

✌ Best wishes from Germany and stay healthy!

Vibrand Design 

____________________________
Pictures for demonstrative purposes only.

Wheel Slider with SwiperJS | Vibrand Design

SwiperJS Wheel Slider

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

Carousel slider with Swiper JS [Cloneable]

• Centered slide
• Active slide with a custom style (class: Swiper Slide Active)
• Infinite loop
• Navigation arrows
• Keyboard control
• Mousewheel control
• Custom swipe speed
• Full screen layout
• RWD

// Copy the code from Page Settings. //

Enjoy! ✌️

Created by Ficturo -> https://www.ficturo.com/

Swipeflow

Swipeflow・Swiper JS & Webflow Integration

Expanding Team Slider

Scroll Snapping Slider

Swiper Overlapping Cards

How to use the Swiper.JS slider with Webflow CMS. Use Case of Swiper JS slider on vertical scroll (mouse control).

Slider-SwiperJS-homepage-example

mouse control scroll for full screen vertical slider with swiperjs library

This demo showcases a clip-path swiper.js slider. The clip-path is animated using the Greensock animation script.

Inspired by: https://tympanus.net/codrops/2021/03/10/shape-slideshow-with-clip-path/

Swiper.js Slider: https://swiperjs.com/

Greensock animation script: https://greensock.com/

WebDev For You - Interaction #153

Clip-Path Swiper.js Slider - Interaction #153 - WebDev For You

Swiper.js Slider

method zero

Method Zero by Pinkman is launching a new product where the guys will offer 3(!) design concepts to choose from and will build you up to a 6-block site in just 7 days and $1.5k.

Lite Method

Method Zero | Lite

Swiper.js Infinite Scroll

Scaler Marketing

Swiper JS | Scaler Marketing

swiperjs-scaler-marketing

Very basic but smooth cover flow effect using swiperjs

Swiper Coverflow

Coverflow Effect using Swiper JS

While we designed this website, Information architecture, and visual hierarchy was the most essential part of the e-commerce website UX process. We ensured the user could quickly and intuitively navigate the site with such a varied product assortment.
Credits: Jetboost

Shopcart - Ecommerce Landing Page

Here's a slider that I've made for a project featuring a full width on mobile.

Images from unsplash.com

Discover swiper websites built by the Webflow community

Discover swiper websites built by the Webflow community