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;