1.1.11 • Published 1 year ago
@vueimple/carousel v1.1.11
@vueimple/carousel
Simple single carousel component
Features
- Autoplay
- Multiple slides
- Breakpoints
- Drag and touch slide change (please set draggable=false for your images to avoid not-allowed cursor)
Options
| Option | Type | Default | Description |
|---|---|---|---|
| animation | string | 'linear' | animation easing name. "linear", "ease", "ease-in", "ease-out", and "ease-in-out", or a custom "cubic-bezier" value like "cubic-bezier(0.42, 0, 0.58, 1)" |
| arrows | boolean | true | is show arrows |
| arrowsOutside | boolean | false | is arrows outside of carousel |
| autoplay | number | 2000 | animation intervals in milliseconds |
| dots | boolean | true | is show dots |
| dotsOutside | boolean | true | is dots outside of carousel |
| draggable | boolean | true | allow change slides by drag or touch |
| duration | number | 500 | animation duration in milliseconds |
| gap | string | '10px' | gap between slides when more than one slide per page |
| infinite | boolean | true | enable infinite slides change. If infinite disabled, left arrow wouldn't show on the first slide and right arrow wouldn't show on the last slide |
| responsive | Record<string, ResponsiveSettings> | {} | responsive settings where property is valid media query min-width value. See below |
| slidesPerPage | number | 1 | number of slides per page to show |
Responsive options
All properties are optional
| Option | Type | Description |
|---|---|---|
| arrows | boolean | is show arrows |
| arrowsOutside | boolean | is arrows outside of carousel |
| autoplay | boolean | animation intervals in milliseconds |
| dots | boolean | is show dots |
| dotsOutside | boolean | is dots outside of carousel |
| draggable | boolean | allow change slides by drag or touch |
| gap | string | gap between slides when more than one slide per page |
| slidesPerPage | number | number of slides per page to show |
Example
{
autoplay: 0,
arrowsOutside: true,
dotsOutside: false,
slidesPerPage: 3,
gap: '20px',
responsive: {
800: {
autoplay: 0,
slidesPerPage: 1,
gap: '10px'
}
}
}
}Methods
- next - go to next slide
- prev - go to previous slide
- goTo(index: number) - go to {index} slide
- start - start animation
- stop = stop animation
Events
- change - fires before slide change
Slots
| Name | Description | Parameters |
|---|---|---|
| prev | previous arrow | |
| next | next arrow | |
| dots | navigation | current-slide, is-active |
1.1.11
1 year ago