@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 |