Actions
Switch Theme
Getting startedInstallation
Basics
SocialsYouTube
Facebook
Jose Tamu
September 28, 2024 /  Intermediate

Parallax Slider

Parallax Slider· Demo

How it works

Parallax Slider is a nestable block element made up of Slider Items.
You can duplicate and remove Slider Items at pleasure.
Each Slider Item contains an image control and the content you want to set at the slide should be placed inside it.
Parallax Slider shouldn’t be wrapped at any element. Otherwise, parent paddings, margins, dimensions, etc.. can break the parallax animation. Just drop it at your page as if it was a container.

Styles

You can set any style you need at the style tabs of both Parallax Slider and each Slider Items. However, Slider Items should share the same dimensions to achieve a nice parallax effect. These dimensions can be set at width and height controls available at “Slider Items Style” Section.

Progress

Margin: the distance to be set regarding Parallax Slider. The demo uses 50px.
Width: the width of the progress. The demo uses 80%.
Height: the height of the progress. The demo uses 1px.
Path color: the color of the path filled by the progress.
Line color: the color of the progress.

Animation

Parallax scale: the scale to apply to the images to achieve the parallax effect. The demo uses 1.75
Ease: the parallax intensity. The demo uses 0.1
Ease: the speed when scrolling the slider. The demo uses 0.45
Ease: the speed when dragging the slider. The demo uses 1.5

– Tamu

On this page