Swipe Library: Feature and Functionality Demo Examples

Last updated: 29 days ago

Category: Examples

The Swipe module is a carousel and rotating banner module that enables the cyclic display of media content such as text, images, videos, and iframes. It supports drag-and-drop scrolling as well as button-click slider switching. It also supports asynchronous content fetching, insertion, and deletion of sliders. The module responds to changes in sliders and the outer container, automatically adjusting the relationships between sliders.

Grid Layout

The default is single-row or single-column layout. If multi-row or multi-column layout is needed, use the divide parameter which defaults to 1. Set a positive integer greater than 1 for multi-row/column layouts.

Free Scaling

When the slides parameter is an integer, the module automatically calculates the width/height dimensions of slides.

Free-width swipe also works with gap and divide parameters.

Non-Snappable

All modules can be snapped to headers by default. To exclude certain slides (make them not snappable), use the unalign parameter which accepts a node selector (same syntax as the first parameter of getEls).

Non-Draggable

By default, dragging is enabled on every slide using mouse or touch.

Nesting

Supports nested sliders, allowing child sliders to serve as parent containers for other instances.

Multi-Slide Wheel Scroll

By default, wheel scrolling moves one column (horizontal) or one row (vertical).

Arrow Keys Instead of Wheel

Set keyboard:true to enable arrow keys as wheel replacement.

Multiple Slides Per Drift

The drift parameter can set the number of slides to drift at once, with a default value of 1. The syntax is as follows:

Grouping

The group parameter enables grouping, which will forcibly reset the wheel and drift parameters. Grouping changes the bullet count. The default group value is 0 (no grouping).

Container Dimension Responsiveness

When the outer container dimensions change, the slide dimensions will automatically update. To manually update slide dimensions, set resizeReset:false and use ins.resetSlideSize().

Content Selection

Since default events are prevented on both the wrap container and document, slide content becomes unselectable.

Centered Slides

Slides default to snapping at the starting position (far left or top). The scroll.paddingStart parameter can change the snap position.

When using centered slides with an active setting, the active slide may not fill the container completely, potentially leaving empty space at the start.

RTL Scrolling

With flow: 'h' parameter, adding dir="rtl" attribute to the target node enables right-to-left dragging (Arabic/Hebrew writing direction).

Empty Container Initialization

Supports adding slides sequentially to an initially empty container using the add method.

Lazy Loading

By default, the module loads all slide content immediately during initialization. This is acceptable for small numbers of slides, but for large datasets, lazy loading may be needed.

Auto Height Adjustment

For horizontal scrolling, the container typically has a fixed height. If slides have varying heights, content may be cut off.

Auto Play

By default, scrolling requires manual interaction. Set autoplay:true or autoplay.enable:true to enable automatic scrolling after loading.

Set autoplay.countdown:true to enable a countdown timer. Clicking the timer toggles pause/resume. Manual dragging will cancel autoplay and hide the timer.

Linked Instances

To use another instance's slides as indicators (replacing the current instance's slide indicators), use the thumb parameter which accepts:

• content: Linked instance
• type: Instance type (default: 'swipe', options: 'pill', 'step', 'doms', 'dom', 'doms')
• attribute: Attribute added when focused (default: 'selected')
• mode: Slide transition method ('scroll' or 'locate' - no animation)

Zoomable Slides

Set zoom:true or zoom.enable:true to enable slide zooming. Double-click slides to zoom, particularly useful for viewing large images.