Slider

Content Widths

1

2

3

4

5

6

7

8

9

10

11

12

Different Widths

1

2

3

4

5

6

7

8

9

10

11

12

Width Classes + Toggle on active

1

2

3

4

5

6

7

8

9

10

Grid + Toggle on hover

1

2

3

4

5

6

7

8

9

10

Container Offset + Cards

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Secondary

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Secondary

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Secondary

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Parallax Control

1

2

3

4

5

6

7

8

9

10

Viewport Height + Parallax

Heading

Lorem ipsum dolor sit amet.

Heading

Lorem ipsum dolor sit amet.

Heading

Lorem ipsum dolor sit amet.

Heading

Lorem ipsum dolor sit amet.

Heading

Lorem ipsum dolor sit amet.

JavaScript Options

Option Value Default Description
autoplay Boolean false Starts autoplaying the slideshow.
autoplay-interval Number 7000 The delay between switching slides in autoplay mode.
center Boolean false Center the active slide.
draggable Boolean true Enable pointer dragging.
finite Boolean false Disable infinite sliding.
index Number 0 Slider item to show. 0 based index.
active String all Slider item/items to apply the transition active class to (all|first).
parallax Boolean false Enable parallax scrolling for the slider.
parallax-target CSS selector false Element dimension reference for the parallax duration. Defaults to the slider items list.
parallax-start Length 0 Start offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. The default value of `0` means that the target's top border and viewport's bottom border intersect.
parallax-end Length 0 End offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. The default value of `0` means that the target's bottom border and the viewport's top border intersect.
parallax-easing Number 0 Animation easing during scrolling.
pause-on-hover Boolean true Pause autoplay mode on hover.
sets Boolean false Slide in sets.
velocity Number 1 The animation velocity (pixel/ms).
i18n Object null Override default translation texts.

i18n

Key Default Description
next Next slide aria-label for next slide button.
previous Previous slide aria-label for previous slide button.
slideX Slide %s aria-label for pagination slide button.
slideLabel %s of %s aria-label for slide.