throw-slider v1.0.0

throw-slider

Slider with throw effect

All credit goes to GSAP https://codepen.io/GreenSock/pen/ExdyYed

Usage

Install

npm i throw-slider

Import

import 'throw-slider'

Use

<throw-slider>
    <div>
        <img src="https://picsum.photos/800/600?random=1" alt="slide 1">
    </div>
    <div>
        <img src="https://picsum.photos/300/400?random=2" alt="slide 2">
    </div>
    <div>
        <img src="https://picsum.photos/800/300?random=3" alt="slide 3">
    </div>
    <div>
        <img src="https://picsum.photos/800/600?random=4" alt="slide 4">
    </div>
    <div>
        <img src="https://picsum.photos/600/600?random=5" alt="slide 5">
    </div>
    <div>
        <img src="https://picsum.photos/800/600?random=6" alt="slide 6">
    </div>
    <div>
        <img src="https://picsum.photos/800/600?random=7" alt="slide 7">
    </div>
    <div>
        <img src="https://picsum.photos/800/600?random=8" alt="slide 8">
    </div>
    <div>
        <img src="https://picsum.photos/800/600?random=9" alt="slide 9">
    </div>
</throw-slider>

Options

Events

interface ThrowEvent {
  currentItem: HTMLElement;
  currentIndex: number;
}

"onChange": (event: CustomEvent<ThrowEvent>) => void;