Cross-fade

Both slides are visible simultaneously during the transition — the outgoing fades out while the incoming fades in. crossFade: true. The cleanest option for hero banners or image galleries.

View code

<div class="c--slider-a c--slider-a--effect" id="my-slider">
  <div class="c--slider-a__wrapper">
    <div class="c--slider-a__slide">1</div>
    <div class="c--slider-a__slide">2</div>
    <div class="c--slider-a__slide">3</div>
  </div>
</div>
<div id="my-pag" class="c--slider-a__pagination"></div>

.c--slider-a { position: relative; width: 100%; overflow: hidden; }
.c--slider-a__wrapper { display: flex; will-change: transform; }

/* Stacked layout required for all absolute-position effects */
.c--slider-a--effect { height: 260px; }
.c--slider-a--effect .c--slider-a__wrapper { height: 100%; }
.c--slider-a--effect .c--slider-a__slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; transition: opacity 600ms ease;
}
.c--slider-a--effect .c--slider-a__slide.is-active { opacity: 1; }

.c--slider-a {
  position: relative;
  width: 100%;
  overflow: hidden;

  &__wrapper {
    display: flex;
    will-change: transform;
  }

  &--effect {
    height: 260px;
  }

  &--effect .c--slider-a__wrapper {
    height: 100%;
  }

  &--effect .c--slider-a__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 600ms ease;
  }

  &--effect .c--slider-a__slide.is-active {
    opacity: 1;
  }
}

import { Slider } from '@andresclua/sliderkit'
import { arrows, pagination } from '@andresclua/sliderkit-plugins'
import { fadeEffect } from '@andresclua/sliderkit-effects'

new Slider('#my-slider', {
  loop: false,
  rewind: true,
  speed: 600,
  plugins: [
    fadeEffect({ crossFade: true }),
    arrows(),
    pagination({ el: '#my-pag', type: 'dots', clickable: true }),
  ],
})

Fade + autoplay

Fade combined with autoplay creates a classic full-screen slideshow. Pair a long delay (4–6 s) with a slow fade speed (800–1200 ms) for a smooth, unobtrusive background effect.

View code

<div class="c--slider-a c--slider-a--effect" id="my-slider">
  <div class="c--slider-a__wrapper">
    <div class="c--slider-a__slide img-slide">
      <img src="/hero1.jpg" alt="Hero 1" />
    </div>
    <div class="c--slider-a__slide img-slide">
      <img src="/hero2.jpg" alt="Hero 2" />
    </div>
  </div>
</div>

.c--slider-a--effect { height: 300px; }
.c--slider-a--effect .c--slider-a__wrapper { height: 100%; }
.img-slide { position: absolute; inset: 0; overflow: hidden; }
.img-slide img { width: 100%; height: 100%; object-fit: cover; }

.c--slider-a--effect { height: 300px; }
.c--slider-a--effect .c--slider-a__wrapper { height: 100%; }
.img-slide { position: absolute; inset: 0; overflow: hidden; }
.img-slide img { width: 100%; height: 100%; object-fit: cover; }

import { Slider } from '@andresclua/sliderkit'
import { autoplay } from '@andresclua/sliderkit-plugins'
import { fadeEffect } from '@andresclua/sliderkit-effects'

new Slider('#my-slider', {
  loop: true,
  speed: 1200,
  plugins: [
    fadeEffect({ crossFade: true }),
    autoplay({ delay: 4000, pauseOnHover: true }),
  ],
})