CarouselView
Installation
npm i carousel-view
Usage
- Global registration
You may install Vue Carousel globally:
// in main.js
import CarouselView from 'carousel-view'
import 'carousel-view/dist/style/carousel-view.css'
Vue.use(CarouselView)
- Local component
Include the carousel directly into your component using import:
// in your vue file
import { CarouselView } from 'carousel-view'
import 'carousel-view/dist/style/carousel-view.css'
export default {
components: {
CarouselView
}
...
}
HTML Structure
<carousel-view>
...your dom
</carousel-view>
Configuration
Property | Type | Default | Description |
---|---|---|---|
direction | enum(horizontal/vertical) | 'horizontal' | direction for carousel |
loop | Boolean | true | Flag to make the carousel loop around when it reaches the end |
autoHeight | Boolean | true | Adjust the height of the carousel for the current slide. |
autoWidth | Boolean | false | Adjust the width of the carousel for the current slide. |
mousewheelControl | Boolean | true | enable mousewheel control |
paginationVisible | Boolean | true | visibility of pagination |
paginationClickable | Boolean | true | carousel control via pagination click |
speed | Number | 300 | animation speed |
indicatorColor | String | rgba(153, 153, 153, 0.5) | color of indicator |
indicatorTintColor | String | #007aff | tint color of indicator |
... |