How it works

Next Slider is a nestable div component. Drop Next Slider Item components into Next Slider Items. Nested elements or components should be placed inside Content.

Next Slider is built on top of Splide. You can learn more here.

Gap, arrow look and pagination look live in the Next Slider style. Slide size and background live in the Next Slider Item style.

Type: slide or loop. Loop continues from the end to the first slide.

Drag: true, false or free. True: the slider is draggable and each slide snaps into place. False: the slider is not draggable. Free: the slider is draggable without snapping each slide into place.

Auto Width: if enabled, slide width is determined by each slide's own width.

Snap: if enabled, dragging snaps to the nearest slide. Drag must be set to free.

Speed: the higher the number, the slower the slide movement. Default 400.

CSS Easing: determines the easing of the slider transitions. You can set any custom CSS easing. Learn more about CSS easing functions here.

Rewind

Enable Rewind: when the slider ends it returns to the beginning. Available when Type is slide.

Speed: the rewind movement speed. Shown when Enable Rewind is enabled.

Rewind by Drag: allows rewind when dragging. Shown when Enable Rewind is enabled.

Flick

Power: the larger this number is, the farther the slider runs between slides.

Max Pages: limits the number of pages to move by the flick action.

Accesibility

Keyboard: enables custom keyboard shortcuts. true, false or global.

Wheel: enables navigation by the mouse wheel on hover.

Wheel Sleep: the sleep duration in milliseconds until the next wheel is accepted. Shown when Wheel is enabled.

Release Wheel: releases the wheel event when the slider reaches the first or last slide so the user can keep scrolling the page. Shown when Wheel is enabled. Available when Enable Rewind is disabled.

Slides

Starting Slide: the slide where the slider should start. Default 1.

Per page: the number of slides to display. Auto Width must be disabled.

Per move: the number of slides to move at once.

Gap lives in the Next Slider style.

Per page Breakpoints

A repeater of breakpoints. Each item:

Breakpoint: the viewport width, in pixels.

Per page: the number of slides to display at that breakpoint.

Arrows

Enable arrows: if disabled, arrows are not included.

Arrow scale, icons, color, background and margin live in the Next Slider style.

Pagination

Enable Pagination: if disabled, pagination is not included.

Active and inactive dot color, justify and margin live in the Next Slider style.

Autoplay

Enable Autoplay: if disabled, slides will not autoplay.

The following controls are shown when Enable Autoplay is enabled.

Omit End: if the ending slides are already in the viewport, they are omitted.

Pause on hover: pauses autoplay on hover.

Interval: the autoplay interval between slides, in milliseconds. Default 1500.

Lazy load: false, nearby or sequential. false disables lazy loading. nearby starts loading images around the active slide. sequential loads images one after another.

Pagination Direction: ltr or rtl. This also changes the Autoscroll direction.

Is Navigation: if enabled, each slide has its own pagination dot.

Autoscroll

Enable Autoscroll: if disabled, the slider will not autoscroll. If Type is loop, autoscroll results in a marquee effect.

The following controls are shown when Enable Autoscroll is enabled.

Speed: the higher the number, the faster autoscroll runs.

Enable Autostart: if enabled, autoscroll plays on window load.

Pause on hover: pauses autoscroll on hover.

Rewind: if enabled, autoscroll rewinds to the beginning when it reaches the end. Type must be slide.

How it works

Polaroid is not nestable. Add cards with the Cards repeater. Each card is an image. Add, remove and duplicate cards as you need.

Drag a card far enough and it is sent to the back of the stack. Card size and frame border live in the Polaroid style. Drag behavior lives in Interaction.

Cards

A repeater of polaroid images. Each item:

Image

Interaction

Drag sensitivity: the pointer distance, in pixels, required to send the card to the back of the stack. Default 200.

Rotation spread: the rotation, in degrees, added between stacked cards. Default 4.

How it works

Thumbnail Slider is not nestable. It is made up of Slider items. Each Slider item is an image. Add, remove and duplicate items as you need.

These sections live in the Thumbnail Slider style:

Slides Container: wraps the preview and the arrows.

Thumbnails Container: wraps the thumbnails at the bottom.

Morphing Selector: the interactive border mask applied to the active thumbnail.

Thumbnail: the slide previews at the bottom, wrapped by the Thumbnails Container.

Arrows: they have an absolute position and sit at each side of the Slides Container by default.

Scroll animation is the movement applied to the thumbnails. Selector animation is the movement applied to the Morphing Selector.

Slider items

A repeater of images. Each item:

Image

Scroll animation

Duration

GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.

Custom easing: used when GSAP easing is set to custom.

Selector animation

Duration

GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.

Custom easing: used when GSAP easing is set to custom.

How it works

Parallax Slider is not nestable. It is made up of Slider items. Add, remove and duplicate items as you need. Each Slider item is an image and a text. There is no nested Content slot.

Parallax Slider shouldn’t be wrapped in another element or component. Parent paddings, margins and dimensions can break the parallax animation. Drop it on the page like you would do at an Etch div or container.

Slider items should share the same dimensions to achieve a nice parallax effect. Item width, slider height, gap and padding live in the Parallax Slider style.

Progress (margin, width, height, path color and line color) lives in the Parallax Slider style.

Slider items

A repeater of slides. Each item:

Image

Text: the heading shown on the slide.

Animation

Scroll direction: the user's movement direction to use the slider. Upward or Downward.

Parallax scale: the scale applied to the images to achieve the parallax effect. Default 1.75.

Ease: the parallax intensity. Default 0.1.

Scroll multiplier: the speed when scrolling the slider. Default 0.45.

Drag speed: the speed when dragging the slider. Default 1.5.

How it works

Stories is not nestable. It is made up of Story items. There are no Story child components, and you cannot drop nested elements or components into a story. Each Story item is an image or a video.

Stories also contains Thumbs that are not available in the structure panel. Thumb styles live in the Stories style. Thumbs will match your number of stories automatically.

Size, border radius and brightness live in the Stories style.

Story items

A repeater of stories. Add, remove and duplicate items as you need. Each item:

Type: Image or Video.

Media: the image or video for this story.

Settings

Duration: how long each image story stays visible, in seconds. Video stories use the video length. Default 5.

GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.

Custom easing: used when GSAP easing is set to custom.

How it works

Infinite Slider is not nestable. It is made up of Slider items. Add, remove and duplicate items as you need. Each Slider item is an image and a text. There is no nested Content slot.

Slider items must have defined dimensions. Slider width and height, item width and the gap live in the Infinite Slider style.

Slider items

A repeater of slides. Each item:

Image

Text: the label shown on the slide.