Swiper tweaks and modifications
Table of Contents
About
This package contains tweaks and modifications done to Swiper mostly for my personal use that I decided to publish since it could be useful to others as well.
Installation
$ npm install swiper-mods
Modules
Z
axis
Parallax with The default Parallax module supports animating along the X
and Y
axes but lacks support for the Z
axis. This module adds support for the Z
Axis.
Usage
Import the Parallax
module from swiper-mods/modules
instead of swiper/modules
:
import { Parallax } from 'swiper-mods/modules';
The rest of the setup process is the same as the default Parallax module.
Changes
This module adds two new attributes:
-
data-swiper-parallax-z-initial
: initialZ
value in pixels. -
data-swiper-parallax-z
: value in pixels to move the element along theZ
axis depending on progress.
⚠️ Percentage values are not supported for theZ
axis and will be treated as pixel values (e.g. "20%" works the same as "20").
Demo
Author
Rashid Shamloo (github.com/rashidshamloo)