Styling

SliderKit uses a BEM-based CSS class system. All classes are prefixed with c--slider-a.

HTML structure

<div class="c--slider-a" id="my-slider">
  <div class="c--slider-a__wrapper">
    <div class="c--slider-a__slide" data-slide>Slide 1</div>
    <div class="c--slider-a__slide" data-slide>Slide 2</div>
  </div>
</div>

Core CSS classes

Class	Applied to	Purpose
.c--slider-a	Container	Overflow hidden, position relative, sets the viewport
.c--slider-a__wrapper	Wrapper	Flex row (or column in vertical mode); translate animates here
.c--slider-a__slide	Each slide	Flex shrink 0; width set by applyLayout()

State classes

Class	Applied to	When
.is-active	Active slide	The current visible slide
.is-prev	Previous slide	Slide immediately before active
.is-next	Next slide	Slide immediately after active

Minimum required CSS

.c--slider-a {
  overflow: hidden;
  position: relative;
}

.c--slider-a__wrapper {
  display: flex;
  will-change: transform;
}

.c--slider-a__slide {
  flex-shrink: 0;
}

Effect plugin classes

When an effect plugin is active, a modifier class is added to the container:

Plugin	Container class
fadeEffect	.c--slider-effect-fade
flipEffect	.c--slider-effect-flip
cardsEffect	.c--slider-effect-cards
creativeEffect	.c--slider-effect-creative

Use these to scope slide transition CSS:

.c--slider-effect-fade .c--slider-a__slide {
  transition: opacity 400ms ease;
}

Custom properties

You can use CSS custom properties to make the slider theme-aware:

.c--slider-a {
  --slider-height: 400px;
  height: var(--slider-height);
}