Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tflx/throw-slider
Slider with throw effect
https://github.com/tflx/throw-slider
Last synced: about 2 months ago
JSON representation
Slider with throw effect
- Host: GitHub
- URL: https://github.com/tflx/throw-slider
- Owner: tflx
- License: mit
- Created: 2023-05-01T14:02:14.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-29T08:40:43.000Z (11 months ago)
- Last Synced: 2024-01-29T10:29:06.442Z (11 months ago)
- Language: TypeScript
- Size: 17.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```
```
### 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) => void;
```