Examples.

A collection of examples of the slider in action and implementation ideas.

Controls.

Previous and next buttons, clickable dots.

Infinite

Snap

controls

current

Github

0

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

Keyboard controls.

Arrow keys, spacebar, and number keys to navigate. Nothing on mobile.

Infinite

Snap

controls

Github

0

1

2

3

4

5

6

7

8

9

10

11

12

13

14

Parallax.

Weird parallax effect but kinda exemplifies why you might want it.

Infinite

Snap

Parallax

current

Github

0

1

2

3

4

5

6

7

8

9

10

11

12

13

Parallax + speed.

Parallax and speed used in conjunction to create a bouncy effect.

Infinite

Snap

Parallax

Speed

Github

Variable width.

Slides with different widths that snap to center, perfect for mixed content layouts.

Variable width

Snap

Finite

Github

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Auto-scrolling slider.

Continuously scrolls at a constant speed. Pauses on hover or interaction, resumes automatically.

Infinite

Auto-scroll

Github

0

1

2

3

4

5

6

7

8

9

10

Vertical slider.

Same functionality as horizontal, but scrolling vertically. Use ArrowUp/ArrowDown keys to navigate.

Vertical

Infinite

Snap

Github

0

1

2

3

4