throw-slider

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

Attribute	Type	Default	Description
autoplay	Boolean	false	Automatically moves
speed	Number	1	Speed of the autoplay. Higher is faster
notDraggable	Boolean	false	Remove the dragging option
center	Boolean	false	Active element is the one in the center of the container rather than the left edge
noRepeat	Boolean	false	Stop looping
reversed	Boolean	false	Moves in reverse
noSnap	Boolean	false	Don't snap on items
noPauseOnHover	Boolean	false	Don't pause autoplay on hover
throwResistance	Number	3500	Throw resistance, default is 3500

Events

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

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