Back to Snippets

Pure CSS Carousel with Scroll Buttons and Markers

Five slides sit in a row. Swipe or scroll to move between them, click the arrows at either side, or click a dot underneath, and every slide snaps into place.

The track is a plain scroll container with scroll-snap-type on the inline axis and scroll-snap-align on each slide, which is what makes swiping land cleanly. The arrows are the ::scroll-button pseudo-elements, real buttons the browser renders that scroll the container by most of its visible width and disable themselves at either end. The dots come from scroll-marker-group on the container and ::scroll-marker on each slide, with :target-current styling the one for the slide in view.

Scroll snap works everywhere. ::scroll-button and ::scroll-marker landed in Chrome and Edge in 2025, so in other browsers the carousel is a swipeable snap track without the arrows and dots.

#css

#html

#carousel

#slider

#scroll snap

#gallery

#ui

#animation

Run /HTML *CSS ()JS Output Console0 Live Updates Focus

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  background: #0f172a;
  color: #f8fafc;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.carousel-wrap {
  width: 100%;
  max-width: 720px;
}

.carousel-wrap h1 {
  font-size: 1.25rem;
  margin: 0 0 16px;
  color: #94a3b8;
  font-weight: 600;
}

.carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  scroll-marker-group: after;
  anchor-name: --carousel;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-height: 300px;
  padding: 36px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.slide-1 { background: linear-gradient(135deg, #1d4ed8, #0ea5e9); }
.slide-2 { background: linear-gradient(135deg, #7c3aed, #db2777); }
.slide-3 { background: linear-gradient(135deg, #059669, #84cc16); }
.slide-4 { background: linear-gradient(135deg, #ea580c, #facc15); }
.slide-5 { background: linear-gradient(135deg, #334155, #64748b); }

.tag {
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.2);
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.slide h2 {
  font-size: 1.625rem;
  line-height: 1.15;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.slide p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

.carousel::scroll-button(*) {
  position: absolute;
  position-anchor: --carousel;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
  font-size: 1.25rem;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.carousel::scroll-button(*):hover {
  background: #ffffff;
}

.carousel::scroll-button(*):disabled {
  opacity: 0.3;
  cursor: default;
}

.carousel::scroll-button(left) {
  content: "\2190" / "Previous";
  position-area: center inline-start;
  margin-right: -24px;
}

.carousel::scroll-button(right) {
  content: "\2192" / "Next";
  position-area: center inline-end;
  margin-left: -24px;
}

.carousel::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 18px 0 0;
}

.slide::scroll-marker {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #334155;
  transition: background 0.15s ease, transform 0.15s ease;
}

.slide::scroll-marker:hover {
  transform: scale(1.3);
}

.slide::scroll-marker:target-current {
  background: #f8fafc;
}

<section class="carousel-wrap">
  <h1>Featured articles</h1>
  <div class="carousel">
    <article class="slide slide-1">
      <span class="tag">Design</span>
      <h2>Designing interfaces that age well</h2>
      <p>Why restraint, real content and consistent spacing outlast every trend.</p>
    </article>
    <article class="slide slide-2">
      <span class="tag">CSS</span>
      <h2>Container queries in production</h2>
      <p>Patterns from a year of shipping components that size themselves.</p>
    </article>
    <article class="slide slide-3">
      <span class="tag">Performance</span>
      <h2>Cutting a second off first paint</h2>
      <p>Fonts, critical CSS and the two image mistakes almost every site makes.</p>
    </article>
    <article class="slide slide-4">
      <span class="tag">Accessibility</span>
      <h2>Focus states people can actually see</h2>
      <p>A checklist for rings, contrast and skip links that hold up in testing.</p>
    </article>
    <article class="slide slide-5">
      <span class="tag">JavaScript</span>
      <h2>Less script, same interface</h2>
      <p>Native dialogs, popovers and scroll snap replacing three libraries.</p>
    </article>
  </div>
</section>

Pure CSS Carousel with Scroll Buttons and Markers

Share Code Snippet