Max Slider

A slick, animated carousel built with vanilla HTML, CSS, and JavaScript. No dependencies.

Install

npm install max-slider

Usage

1. Import the styles

<link rel="stylesheet" href="node_modules/max-slider/styles.css" />

Or in a bundler (Webpack, Vite, etc.):

import "max-slider/styles.css";

2. Add the HTML structure

Your slider markup must follow this structure. The root element can have any id you pass to the constructor:

<section class="slider" id="my-slider" data-mode="dark" aria-roledescription="carousel">
  <div class="slider__chrome" aria-hidden="true"></div>
  <div class="slider__viewport" tabindex="0">
    <div class="track" data-track>
      <article class="slide" data-slide data-accent="#7C3AED">
        <div class="slide__card">
          <div class="slide__shine" aria-hidden="true"></div>
          <!-- Your slide content -->
        </div>
      </article>
      <!-- More slides... -->
    </div>
  </div>
  <button class="nav nav--prev" type="button" data-prev aria-label="Previous slide"><span>‹</span></button>
  <button class="nav nav--next" type="button" data-next aria-label="Next slide"><span>›</span></button>
  <div class="hud">
    <div class="dots" data-dots aria-label="Slide navigation"></div>
    <div class="counter">
      <span data-count-current>1</span><span class="counter__sep">/</span><span data-count-total>5</span>
    </div>
  </div>
</section>

Light / Dark mode

Set the mode using a data attribute on the slider root:

• data-mode="dark" (default look; great on dark pages)
• data-mode="light" (optimized for white / light pages)

You can switch modes at runtime by changing the attribute:

const el = document.getElementById("my-slider");
el.dataset.mode = "light"; // or "dark"

3. Initialize with JavaScript

import MaxSlider from "max-slider";

const root = document.getElementById("my-slider");
const slider = new MaxSlider(root);
slider.init();

Auto-init

If your root element has id="max-slider", the slider will auto-initialize when the script loads. Otherwise, create and init it manually as shown above.

Customization

Override CSS variables on .slider (or a parent) to adjust the look:

.my-slider {
  --max-slider-accent: #e11d48;
  --max-slider-max-width: 900px;
  --max-slider-radius: 16px;
  --max-slider-slide-gap: 20px;
}

Available variables: --max-slider-accent, --max-slider-text, --max-slider-muted, --max-slider-radius, --max-slider-slide-gap, --max-slider-max-width, --max-slider-ease-out, --max-slider-ease-snap, --max-slider-shadow.

The slider is centered by default (margin: 0 auto). To align left or right, override the parent container or use margin-left: 0 / margin-right: 0 on .slider.

Features

• Drag / swipe support
• Keyboard navigation (← → Home End)
• Autoplay (pauses on hover/focus)
• Respects prefers-reduced-motion
• Accessible (ARIA, focus management)

License

MIT