Home›Docs›List›Swipe Library

Swipe Library

Last updated: 1 month ago

Category: List

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.

Swipe Library: Feature and Functionality Demo Examples29 days ago Swipe Library: Method and Event Usage Examples29 days ago Swipe Library: Styling Pagination & Navigation1 month ago Swipe Library: How to Use Data Sources29 days ago Swipe Library1 month ago

Basic Usage

This module requires following the structural relationship of "parent container" => "item container" => "content", which can be constructed using ul/ol+li element format.

Output
HTML

- Child Element 1
- Child Element 2
- Child Element 3
- Child Element 4
- Child Element 5
- Child Element 6
- Child Element 7
- Child Element 8
- Child Element 9
- Child Element 10
- Child Element 11
- Child Element 12
```
                
                
            
```

Or initialize the module using new syntax example.

Output
HTML
JS

- Child Element 1
- Child Element 2
- Child Element 3
- Child Element 4
- Child Element 5
- Child Element 6
- Child Element 7
- Child Element 8
- Child Element 9
- Child Element 10
- Child Element 11
- Child Element 12
```
                
                
            
```

                
                    new orca.Swipe('#demo01')

Vertical Layout

The module defaults to horizontal layout. For vertical layout, use the parameter flow:'v'.

Output
HTML

- Child Element 1
- Child Element 2
- Child Element 3
- Child Element 4
- Child Element 5
- Child Element 6
- Child Element 7
- Child Element 8
- Child Element 9
- Child Element 10
- Child Element 11
- Child Element 12
```
                
                
            
```

Multiple Slides

By default only one slide is displayed in the viewport. To display multiple slides, use the slides parameter to set the number of visible slides.

Output
HTML

- Child Element 1
- Child Element 2
- Child Element 3
- Child Element 4
- Child Element 5
- Child Element 6
- Child Element 7
- Child Element 8
- Child Element 9
- Child Element 10
- Child Element 11
- Child Element 12
- Child Element 1
- Child Element 2
- Child Element 3
- Child Element 4
- Child Element 5
- Child Element 6
- Child Element 7
- Child Element 8
- Child Element 9
- Child Element 10
- Child Element 11
- Child Element 12
```
                
                
            
```

Using Gaps

The default gap between slides is 0. To add spacing between slides, set the gap parameter. Two formats are supported:

Numeric value, e.g. gap:20 means 20px gap
Text with units, e.g. gap:20px or gap:1.4rem, supports px and rem units

Output
HTML

- Child Element 1
- Child Element 2
- Child Element 3
- Child Element 4
- Child Element 5
- Child Element 6
- Child Element 7
- Child Element 8
- Child Element 9
- Child Element 10
- Child Element 11
- Child Element 12
```
                
                
            
```

Using Pagination

Enable the pagination by setting pgn:true or pgn.enable:true. Defaults to lamp type positioned at bottom center.

Output
HTML

Simple Pagination
- Child Element 1
- Child Element 2
- Child Element 3
- Child Element 4
- Child Element 5
- Child Element 6
- Child Element 7
- Child Element 8
- Child Element 9
- Child Element 10
- Child Element 11
- Child Element 12
pgn:true,slides:2
- Child Element 1
- Child Element 2
- Child Element 3
- Child Element 4
- Child Element 5
- Child Element 6
- Child Element 7
- Child Element 8
- Child Element 9
- Child Element 10
- Child Element 11
- Child Element 12
pgn:true,slides:2,group:2
- Child Element 1
- Child Element 2
- Child Element 3
- Child Element 4
- Child Element 5
- Child Element 6
- Child Element 7
- Child Element 8
- Child Element 9
- Child Element 10
- Child Element 11
- Child Element 12
```
                
                
            
```

Integrated Pagination and Navigation

By default, pagination and navigation buttons are separate. There are two ways to combine them:

Place the _swipe-nav element inside the container
Set the parameter integrated:true

Output
HTML

- Child Element 1
- Child Element 2
- Child Element 3
- Child Element 4
- Child Element 5
- Child Element 6
- Child Element 7
- Child Element 8
- Child Element 9
- Child Element 10
- Child Element 11
- Child Element 12
- Child Element 1
- Child Element 2
- Child Element 3
- Child Element 4
- Child Element 5
- Child Element 6
- Child Element 7
- Child Element 8
- Child Element 9
- Child Element 10
- Child Element 11
- Child Element 12
```
                
                
            
```

OrcaUI-src download, updated to v1.0.5 version (Premium exclusive)

29 days ago

Swipe Library: How to Use Data Sources

29 days ago

Swipe Library

Basic Usage

Vertical Layout

Multiple Slides

Using Gaps

Using Pagination

Simple Pagination

pgn:true,slides:2

pgn:true,slides:2,group:2

Integrated Pagination and Navigation

New Launch: 20% Off All Products