Carousel

A slideshow component for cycling through images or content slides.

<div class="car">
  <div class="car-track" id="car-track">
    <div class="car-slide">Slide 1</div>
    <div class="car-slide">Slide 2</div>
    <div class="car-slide">Slide 3</div>
  </div>
  <button class="car-btn prev" onclick="carMove(-1)"><span class="material-icons-round">chevron_left</span></button>
  <button class="car-btn next" onclick="carMove(1)"><span class="material-icons-round">chevron_right</span></button>
</div>
<div class="car-dots">
  <div class="car-dot active"></div>
  <div class="car-dot"></div>
  <div class="car-dot"></div>
</div>

Installation

Built with pure HTML and CSS. Include ds-shared.css in your project.

pnpm add @norbielink/ds

Usage

Structure

<div class="car">
  <div class="car-track">
    <!-- slides -->
  </div>
  <button class="car-btn prev" onclick="carMove(-1)">...</button>
  <button class="car-btn next" onclick="carMove(1)">...</button>
</div>

API Reference

Classes

Class	Description
`car`	Outer container (overflow:hidden)
`car-track`	Flex row of slides, transforms on navigation
`car-slide`	Individual slide (min-width:100%)
`car-btn prev/next`	Absolute-positioned nav buttons
`car-dot`	Dot indicator, `.active` for current

← Previous Calendar Next → Checkbox