Styling

SliderKit adds BEM class names to every element it creates. Override them with plain CSS — no preprocessor needed.

Minimum required CSS

The slider injects layout styles at runtime via a dynamic stylesheet, but it needs these structural rules to exist in your CSS. Copy one of the blocks below — plain CSS or SCSS, your choice.

CSS

/* ── SliderKit base styles ──────────────────────────── */
.sliderkit__outer {
  position: relative;
  box-sizing: border-box;
}
.sliderkit__outer *,
.sliderkit__outer *::before,
.sliderkit__outer *::after { box-sizing: inherit; }

.sliderkit__overflow {
  overflow: hidden;
  position: relative;
}

.sliderkit {
  user-select: none;
  will-change: transform;
}
.sliderkit--horizontal { touch-action: pan-y; }
.sliderkit--vertical   { touch-action: pan-x; }

.sliderkit__item {
  display: inline-block;
  vertical-align: top;
  min-height: 1px;
}
.sliderkit__item img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
}

.sliderkit__live {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

SCSS

// ── SliderKit base styles ────────────────────────────
.sliderkit__outer {
  position: relative;
  box-sizing: border-box;
  *, *::before, *::after { box-sizing: inherit; }
}

.sliderkit__overflow {
  overflow: hidden;
  position: relative;
}

.sliderkit {
  user-select: none;
  will-change: transform;
  &--horizontal { touch-action: pan-y; }
  &--vertical   { touch-action: pan-x; }
}

.sliderkit__item {
  display: inline-block;
  vertical-align: top;
  min-height: 1px;
  img { display: block; max-width: 100%; width: 100%; height: auto; }
}

.sliderkit__live {
  position: absolute;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

DOM structure

After init, the slider wraps your container in this structure:

div.sliderkit__outer          ← position:relative, arrows mount here
  div.sliderkit__overflow     ← overflow:hidden, clips the track
    div.sliderkit__inner      ← applies edgePadding margin
      div#your-id               ← your original container (the track)
        div.sliderkit__item   ← each slide
      /div
    /div
  /div
  div.sliderkit__pagination   ← pagination mounts here
/div

State classes

Class	Applied to	When
.sliderkit--horizontal	container	Always (horizontal axis).
.sliderkit--vertical	container	When axis:'vertical'.
.sliderkit__item--active	slide	Slide is in the visible range.
.sliderkit__item--clone	slide	Clone slide (loop only).
.sliderkit--frozen	outer wrapper	Slider is frozen (all slides fit, freezable:true).
.sliderkit--autoplay-playing	outer wrapper	Autoplay is running.
.sliderkit--autoplay-paused	outer wrapper	Autoplay is paused.

Customising arrows

/* size and position */
.sliderkit__arrow {
  width: 48px;
  height: 48px;
  border-radius: 4px;          /* square instead of circle */
  background: rgba(0,0,0,0.5);
}

/* placement */
.sliderkit__arrow--prev { left: 0; }
.sliderkit__arrow--next { right: 0; }

/* disabled state */
.sliderkit__arrow--disabled {
  opacity: 0;
  pointer-events: none;
}

Customising dots

/* dot shape */
.sliderkit__pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 2px;          /* square dots */
  background: #d1d5db;
}

/* active dot */
.sliderkit__pagination-bullet--active {
  background: #6C2BD9;
  transform: scale(1.4);
}

Highlighting the active slide

/* dim all slides, brighten the active one */
.sliderkit__item {
  opacity: 0.4;
  transition: opacity 0.3s;
}
.sliderkit__item--active {
  opacity: 1;
}

Vertical arrows

For axis:'vertical' the default arrow positions (left/right) don't make sense. Override them to top/bottom:

.sliderkit__arrow {
  left: 50%;
  transform: translateX(-50%);
}
.sliderkit__arrow--prev { top: 8px; }
.sliderkit__arrow--next { bottom: 8px; top: auto; }

Hide controls when frozen

When freezable:true and all slides fit, the outer wrapper gets .sliderkit--frozen. You can use this to hide controls:

.sliderkit--frozen .sliderkit__arrow,
.sliderkit--frozen .sliderkit__pagination {
  display: none;
}

Autoplay state styling

/* show a pause icon when playing, play icon when paused */
.sliderkit--autoplay-playing .my-play-btn  { display: none; }
.sliderkit--autoplay-paused  .my-pause-btn { display: none; }

Dark mode

@media (prefers-color-scheme: dark) {
  .sliderkit__arrow {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
  }
  .sliderkit__pagination-bullet {
    background: rgba(255, 255, 255, 0.3);
  }
  .sliderkit__pagination-bullet--active {
    background: #a78bfa;
  }
}