Swiper Mods

Swiper tweaks and modifications

Table of Contents

• About
• Installation
• Modules
  • Parallax with Z axis
• Author
• License

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

Parallax with Z axis

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: initial Z value in pixels.
• data-swiper-parallax-z: value in pixels to move the element along the Z axis depending on progress.

⚠️ Percentage values are not supported for the Z axis and will be treated as pixel values (e.g. "20%" works the same as "20").

Demo

Japan Slider

Author

Rashid Shamloo (github.com/rashidshamloo)

License

MIT