Wipe reveal

The incoming slide is revealed with a wipe. Direction-aware — wipes right going forward, left going backward.

1
2
3
4
5
View code 
<div id="my-slider">
  <div class="cp-slide" style="background:linear-gradient(135deg,#6C2BD9,#3b82f6)"><span>1</span></div>
  <div class="cp-slide" style="background:linear-gradient(135deg,#0ea5e9,#06b6d4)"><span>2</span></div>
  <div class="cp-slide" style="background:linear-gradient(135deg,#10b981,#84cc16)"><span>3</span></div>
  <div class="cp-slide" style="background:linear-gradient(135deg,#f59e0b,#ef4444)"><span>4</span></div>
  <div class="cp-slide" style="background:linear-gradient(135deg,#ec4899,#8b5cf6)"><span>5</span></div>
</div>
.cp-slide { height:300px; display:flex; align-items:center; justify-content:center; border-radius:8px; }
.cp-slide span { font-size:4rem; font-weight:800; color:#fff; }
.cp-slide { height:300px; display:flex; align-items:center; justify-content:center; border-radius:8px; }
.cp-slide span { font-size:4rem; font-weight:800; color:#fff; }
import { Slider } from '@andresclua/sliderkit'
import { arrows } from '@andresclua/sliderkit-plugins'
import { clipPathEffect } from '@andresclua/sliderkit-effects'

new Slider('#my-slider', {
  items: 1,
  loop: false,
  speed: 300,
  plugins: [
    arrows(),
    clipPathEffect({ shape: 'wipe-right', duration: 600, easing: 'ease-in-out' }),
  ],
})

Circle reveal

The incoming slide expands from the center as a growing circle.

1
2
3
4
5
View code 
<div id="my-slider">
  <div class="cp-slide" style="background:linear-gradient(135deg,#6C2BD9,#3b82f6)"><span>1</span></div>
  <div class="cp-slide" style="background:linear-gradient(135deg,#0ea5e9,#06b6d4)"><span>2</span></div>
  <div class="cp-slide" style="background:linear-gradient(135deg,#10b981,#84cc16)"><span>3</span></div>
  <div class="cp-slide" style="background:linear-gradient(135deg,#f59e0b,#ef4444)"><span>4</span></div>
  <div class="cp-slide" style="background:linear-gradient(135deg,#ec4899,#8b5cf6)"><span>5</span></div>
</div>
.cp-slide { height:300px; display:flex; align-items:center; justify-content:center; border-radius:8px; }
.cp-slide span { font-size:4rem; font-weight:800; color:#fff; }
.cp-slide { height:300px; display:flex; align-items:center; justify-content:center; border-radius:8px; }
.cp-slide span { font-size:4rem; font-weight:800; color:#fff; }
import { Slider } from '@andresclua/sliderkit'
import { arrows } from '@andresclua/sliderkit-plugins'
import { clipPathEffect } from '@andresclua/sliderkit-effects'

new Slider('#my-slider', {
  items: 1,
  loop: false,
  speed: 300,
  plugins: [
    arrows(),
    clipPathEffect({ shape: 'circle', duration: 700, easing: 'ease-out' }),
  ],
})

Diamond reveal

The incoming slide is revealed as a diamond expanding from the center.

1
2
3
4
5
View code 
<div id="my-slider">
  <div class="cp-slide" style="background:linear-gradient(135deg,#6C2BD9,#3b82f6)"><span>1</span></div>
  <div class="cp-slide" style="background:linear-gradient(135deg,#0ea5e9,#06b6d4)"><span>2</span></div>
  <div class="cp-slide" style="background:linear-gradient(135deg,#10b981,#84cc16)"><span>3</span></div>
  <div class="cp-slide" style="background:linear-gradient(135deg,#f59e0b,#ef4444)"><span>4</span></div>
  <div class="cp-slide" style="background:linear-gradient(135deg,#ec4899,#8b5cf6)"><span>5</span></div>
</div>
.cp-slide { height:300px; display:flex; align-items:center; justify-content:center; border-radius:8px; }
.cp-slide span { font-size:4rem; font-weight:800; color:#fff; }
.cp-slide { height:300px; display:flex; align-items:center; justify-content:center; border-radius:8px; }
.cp-slide span { font-size:4rem; font-weight:800; color:#fff; }
import { Slider } from '@andresclua/sliderkit'
import { arrows } from '@andresclua/sliderkit-plugins'
import { clipPathEffect } from '@andresclua/sliderkit-effects'

new Slider('#my-slider', {
  items: 1,
  loop: false,
  speed: 300,
  plugins: [
    arrows(),
    clipPathEffect({ shape: 'diamond', duration: 700, easing: 'ease-in-out' }),
  ],
})

Custom shape — corner spotlight

A circle expanding from the bottom-left corner. Fully custom: pass hidden and visible clip-path values directly.

1
2
3
4
5
View code 
<div id="my-slider">
  <div class="cp-slide" style="background:linear-gradient(135deg,#6C2BD9,#3b82f6)"><span>1</span></div>
  <div class="cp-slide" style="background:linear-gradient(135deg,#0ea5e9,#06b6d4)"><span>2</span></div>
  <div class="cp-slide" style="background:linear-gradient(135deg,#10b981,#84cc16)"><span>3</span></div>
  <div class="cp-slide" style="background:linear-gradient(135deg,#f59e0b,#ef4444)"><span>4</span></div>
  <div class="cp-slide" style="background:linear-gradient(135deg,#ec4899,#8b5cf6)"><span>5</span></div>
</div>
.cp-slide { height:300px; display:flex; align-items:center; justify-content:center; border-radius:8px; }
.cp-slide span { font-size:4rem; font-weight:800; color:#fff; }
.cp-slide { height:300px; display:flex; align-items:center; justify-content:center; border-radius:8px; }
.cp-slide span { font-size:4rem; font-weight:800; color:#fff; }
import { Slider } from '@andresclua/sliderkit'
import { arrows } from '@andresclua/sliderkit-plugins'
import { clipPathEffect } from '@andresclua/sliderkit-effects'

new Slider('#my-slider', {
  items: 1,
  loop: false,
  speed: 300,
  plugins: [
    arrows(),
    clipPathEffect({
      shape: {
        hidden:  'circle(0% at 15% 85%)',
        visible: 'circle(170% at 15% 85%)',
      },
      duration: 800,
      easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
    }),
  ],
})

Direction-aware shapes

Next → wipe from top. Prev → custom circle from bottom-right corner. Mix presets and custom shapes per direction.

1
2
3
4
5
View code 
<div id="my-slider">
  <div class="cp-slide" style="background:linear-gradient(135deg,#6C2BD9,#3b82f6)"><span>1</span></div>
  <div class="cp-slide" style="background:linear-gradient(135deg,#0ea5e9,#06b6d4)"><span>2</span></div>
  <div class="cp-slide" style="background:linear-gradient(135deg,#10b981,#84cc16)"><span>3</span></div>
  <div class="cp-slide" style="background:linear-gradient(135deg,#f59e0b,#ef4444)"><span>4</span></div>
  <div class="cp-slide" style="background:linear-gradient(135deg,#ec4899,#8b5cf6)"><span>5</span></div>
</div>
.cp-slide { height:300px; display:flex; align-items:center; justify-content:center; border-radius:8px; }
.cp-slide span { font-size:4rem; font-weight:800; color:#fff; }
.cp-slide { height:300px; display:flex; align-items:center; justify-content:center; border-radius:8px; }
.cp-slide span { font-size:4rem; font-weight:800; color:#fff; }
import { Slider } from '@andresclua/sliderkit'
import { arrows } from '@andresclua/sliderkit-plugins'
import { clipPathEffect } from '@andresclua/sliderkit-effects'

new Slider('#my-slider', {
  items: 1,
  loop: false,
  speed: 300,
  plugins: [
    arrows(),
    clipPathEffect({
      shape: {
        forward: 'wipe-down',
        backward: {
          hidden:  'circle(0% at 85% 85%)',
          visible: 'circle(170% at 85% 85%)',
        },
      },
      duration: 800,
      easing: 'ease-in-out',
    }),
  ],
})