What is this?
This is a carousel that is powered by modern web technology. It uses snap scrolling, an unordened list with horizontal overflow set to auto and hidden scrollbars. The bullets are actually anchor links, which trigger a scroll-behaviour: smooth scroll. It is silky smooth, blazing fast and has graceful degredation. And the best thing: it is only 3kb large.
How to use it?
Below you can find a simplified version of the required HTML.
<div id="carousel0" class="carousel" duration="7000">
<ul>
<li id="c0_slide1">
<img src="image1.jpg" alt="image1">
<div>
<div>1</div>
</div>
</li>
...
</ul>
<ol>
<li>
<a href="#c0_slide1"></a>
</li>
...
</ol>
<button class="prev">‹</button>
<button class="next">›</button>
</div>
<link rel="stylesheet" href="carousel.css" />
<script src="carousel.js"></script>
Features
You can swipe the carousel with your mouse or your finger on touch screens through native touch scroll. You can also use the arrow keys on your keyboard to scroll the carousel. The carousel automatically advances to the next slide after the duration set in the main div (in millisecond). If you interact with it, the autoplay stops.
Credits
The approach is (partly) based on the 2019 scroll snap carousel from Nolan Lawson. The debounce function is written by Chris Ferdinandi.
License
This code is licensed WTFPL.