Vertical slide-up

Slides enter from below and exit upward — a dramatic reveal common in full-page section scrollers. Configure prev/active/next transforms with translate Y values: prev slides are above (-110%), next slides wait below (110%). perspective: false keeps everything flat and avoids unwanted 3D distortion.

1
2
3
4
5
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; }

/* Effect layout: stacked absolute slides */
.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%;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s ease;
}
.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%;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s ease;
  }
}
import { Slider } from '@andresclua/sliderkit'
import { arrows, pagination } from '@andresclua/sliderkit-plugins'
import { creativeEffect } from '@andresclua/sliderkit-effects'

new Slider('#my-slider', {
  loop: false,
  rewind: true,
  speed: 500,
  plugins: [
    creativeEffect({
      prev:   { translate: [0, '-110%', 0], opacity: 0 },
      active: { translate: [0, 0, 0],       opacity: 1 },
      next:   { translate: [0, '110%', 0],  opacity: 0 },
      perspective: false,
    }),
    arrows(),
    pagination({ el: '#my-pag', type: 'dots', clickable: true }),
  ],
})

Scale + fade

The active slide is at full size; prev/next slides scale down to 80% and fade to transparent. This creates a zoom-in-from-nothing entrance that draws focus to the content. Combine with opacity for a clean, modern presentation style — works especially well for image galleries or hero sections.

1
2
3
4
5
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; }

.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%;
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.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%;
    transition: transform 0.5s ease, opacity 0.5s ease;
  }
}
import { Slider } from '@andresclua/sliderkit'
import { arrows, pagination } from '@andresclua/sliderkit-plugins'
import { creativeEffect } from '@andresclua/sliderkit-effects'

new Slider('#my-slider', {
  loop: false,
  rewind: true,
  speed: 500,
  plugins: [
    creativeEffect({
      prev:   { scale: 0.8, opacity: 0 },
      active: { scale: 1,   opacity: 1 },
      next:   { scale: 0.8, opacity: 0 },
      perspective: false,
    }),
    arrows(),
    pagination({ el: '#my-pag', type: 'dots', clickable: true }),
  ],
})

Horizontal wipe

The outgoing slide is pushed off to the left while the incoming slide enters from the right — but both are offset at 30% depth on the Z axis, giving a subtle parallax-within-the-wipe feel. This is a good default for content-heavy slides where you want a clear directional transition without the complexity of a full cube or flip effect.

1
2
3
4
5
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; }

.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%;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.55s ease;
}
.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%;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.55s ease;
  }
}
import { Slider } from '@andresclua/sliderkit'
import { arrows, pagination } from '@andresclua/sliderkit-plugins'
import { creativeEffect } from '@andresclua/sliderkit-effects'

new Slider('#my-slider', {
  loop: false,
  rewind: true,
  speed: 550,
  plugins: [
    creativeEffect({
      prev:   { translate: ['-120%', 0, -300], opacity: 0.5 },
      active: { translate: [0, 0, 0],          opacity: 1 },
      next:   { translate: ['120%', 0, -300],  opacity: 0.5 },
      perspective: true,
    }),
    arrows(),
    pagination({ el: '#my-pag', type: 'dots', clickable: true }),
  ],
})