Swiper 3D Slicer

Swiper 3D Slicer

Unique 3D "slicing" slider made with Swiper
Last updated on Aug 25, 2021
SwiperSwiper
Preview
screenshot
screenshot
screenshot
screenshot

Swiper 3D Slicer

This unique use case demonstrates how to create such 3D "slicing" slider with Swiper. And as it is made with Swiper - we still have all the Swiper features in place.

There are two implementations (modes) available:

Ratio Slicer

In this mode each slice (another Swiper) always rotates by some constant (but configurable) mathematical deviation. For example rotating main Swiper by 10 degrees, will move other by 20, 30 and 40 degrees, etc.

Delay Slicer

In this mode each slice (another Swiper) always rotates by same angle but with configurable delay. For example rotating main Swiper by 10 degrees, will move other Swipers by same 10 degrees but with 100ms, 200ms and 300ms delay.

Package

In the package you will find:

  • fully functional project created with Vite and Swiper
  • all required extra styles (in SCSS)
  • all required JavaScript to make it work
  • instructions on how to build, run and preview the project

All product names, logos and brands are property of their respective owners.

Follow UI Initiative on Twitter

2021 © UI Initiative by nolimits4web

Sign In

In order to be able to download catalog items, you need to connect your Patreon account so we can verify you are an active patron of the required Patreon projects