CSS Carousel - Simple Swiper

As simple as it gets, with a collection of elements, the user can simply “swipe” (or drag the scrollbar handle) left and right to make the images “slide” around, all CSS, no JS required.

Demo
HTML
CSS
JS
Baseline
CodePen

Demo

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10

HTML

<!-- No special HTML required -->
<ul class="css-carousel">
  <li>Slide 1</li>
  <li>Slide 2</li>
  <li>Slide 3</li>
  <li>Slide 4</li>
  <li>Slide 5</li>
  <li>Slide 6</li>
  <li>Slide 7</li>
  <li>Slide 8</li>
  <li>Slide 9</li>
  <li>Slide 10</li>
</ul>

CSS

.css-carousel {
  /* Resets for carousel appearance */
  list-style: none;
  padding: 0;
  /* The only CSS necessary for a simple swiper Carousel */
  display: flex;
  overflow-inline: auto;
  /* Prevents accidental page Back/Forward */
  overscroll-behavior-inline: contain;
  /* Confines the scrolling direction */
  scroll-snap-type: inline mandatory;
  /* Be nice to others */
  @media (prefers-reduced-motion: no-preference) { 
    /* Makes the sliding a little smoother */
    scroll-behavior: smooth;
  }
  li {
    /* Make things look a little nicer */
    min-width: 200px;
    aspect-ratio: 1 / 1;
    border: 1px solid;
    place-content: center;
    text-align: center;
  }
}

JS

No JS required.

Baseline

[`scroll-behavior`](https://webstatus.dev/features/scroll-behavior)

[`scroll-snap`](https://webstatus.dev/features/scroll-snap)

CodePen

See the Pen on CodePen.