<carou-scroll> Web Component

Back to the Source Code

Stock

This one includes a variety of child element types including <img> and <picture>. Note that the images are not loaded until you begin to scroll horizontally (when the browser supports loading="lazy").

1
2 3 4 800×450 sample image

6

 7 8 9 800×450 sample image 10

Next/Previous Buttons

1
2
3
4
5
6
7
8
9
10

Looping

1
2
3
4
5
6
7
8
9
10

Show Current Slide Output

1
2
3
4
5
6
7
8
9
10

Show Current Slide Output with Custom Markup (e.g. i18n)

1
2
3
4
5
6
7
8
9
10
슬라이드 /

Full control of button styles and placement

1
2
3
4
5
6
7
8
9
10

Smooth scroll on Button Navigation

1
2
3
4
5
6
7
8
9
10

Links instead of Buttons

1
2
3
4
5
6
7
8
9
10
< Previous Next >

Manual Scroll Snap CSS

Useful if you want scroll snapping to be available before or without JavaScript.

1
2
3
4
5
6
7
8
9
10