Fade effect

Slides cross-fade instead of sliding. Import fadeEffect from @andresclua/sliderkit-effects.

01 / Setup

One import,
one line of code.

No config files. No wrappers. Drop it in and go.

02 / Plugins

Only load
what you need.

Tree-shakeable plugin system. Zero dead code in your bundle.

03 / TypeScript

Full type safety
out of the box.

Written in TypeScript. Autocomplete for every option and event.

04 / Performance

Under 10 kb
gzipped.

Tiny core, no runtime dependencies, hardware-accelerated CSS.

05 / A11y

Accessible
by default.

WAI-ARIA carousel pattern built in. Keyboard navigation included.

View code 
<div id="my-slider">
  <div class="fade-slide" style="background:linear-gradient(135deg,#6C2BD9,#3b82f6)">
    <span class="fade-tag">01 / Setup</span>
    <h2 class="fade-title">One import,<br>one line of code.</h2>
    <p class="fade-sub">No config files. No wrappers. Drop it in and go.</p>
  </div>
  <div class="fade-slide" style="background:linear-gradient(135deg,#0ea5e9,#06b6d4)">
    <span class="fade-tag">02 / Plugins</span>
    <h2 class="fade-title">Only load<br>what you need.</h2>
    <p class="fade-sub">Tree-shakeable plugin system. Zero dead code in your bundle.</p>
  </div>
  <div class="fade-slide" style="background:linear-gradient(135deg,#10b981,#84cc16)">
    <span class="fade-tag">03 / TypeScript</span>
    <h2 class="fade-title">Full type safety<br>out of the box.</h2>
    <p class="fade-sub">Written in TypeScript. Autocomplete for every option and event.</p>
  </div>
  <div class="fade-slide" style="background:linear-gradient(135deg,#f59e0b,#ef4444)">
    <span class="fade-tag">04 / Performance</span>
    <h2 class="fade-title">Under 10 kb<br>gzipped.</h2>
    <p class="fade-sub">Tiny core, no runtime dependencies, hardware-accelerated CSS.</p>
  </div>
  <div class="fade-slide" style="background:linear-gradient(135deg,#ec4899,#8b5cf6)">
    <span class="fade-tag">05 / A11y</span>
    <h2 class="fade-title">Accessible<br>by default.</h2>
    <p class="fade-sub">WAI-ARIA carousel pattern built in. Keyboard navigation included.</p>
  </div>
</div>
.fade-slide {
  height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 56px;
  border-radius: 12px;
  color: #fff;
}
.fade-tag {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 16px;
}
.fade-title {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 16px;
}
.fade-sub {
  font-size: 1rem;
  opacity: 0.8;
  max-width: 380px;
  margin: 0;
  line-height: 1.6;
}
.fade-slide {
  height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 56px;
  border-radius: 12px;
  color: #fff;
}
.fade-tag {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 16px;
}
.fade-title {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 16px;
}
.fade-sub {
  font-size: 1rem;
  opacity: 0.8;
  max-width: 380px;
  margin: 0;
  line-height: 1.6;
}
import { Slider } from '@andresclua/sliderkit'
import { arrows, pagination } from '@andresclua/sliderkit-plugins'
import { fadeEffect } from '@andresclua/sliderkit-effects'

new Slider('#my-slider', {
  items: 1,
  loop: true,
  speed: 300,
  plugins: [
    arrows(),
    pagination({ type: 'dots', clickable: true }),
    fadeEffect({ duration: 600, easing: 'ease-in-out' }),
  ],
})