vuescroll-carousel is a carousel plugin based on ^vuescroll@4.9.0.
It seems like swiper. You can see the guide below.
-
See the Demo fold of this repo.
- You should install
Vue@2.x,vuescroll@4.9.0+andvuescroll-carousel, and registry the plugins.
npm i vue vuescroll vuescroll-carousel -Simport Vue from vue;
import vuescroll from vuescroll;
import vuescroll/dist/vuescroll.css;
// import carousel plugin and its css file
import vuescrollCarousel from vuescroll-carousel;
import vuescroll-carousel/dist/index.css;
// reigstry the plugin
Vue.use(vuescroll);
Vue.use(vuescrollCarousel);- Wrap the element and that's all.
<vuescroll-carousel>
<div v-for="i in 10" :key="i">{{i}}</div>
</vuescroll-carousel>| PropName | Default | Description |
|---|---|---|
| type | h | h or v. h means scrolling on horizontal direction and v is on vertical direction. |
| loop | true | Whether carousel is connected between the end and the end or not. |
| autoPlay | true | whether play the carousel automatically or not. |
| intervalTime | 1000 | Interval time of auto-play, only enable when autoPlay is enable. |
| playSpeed | 300 | play speed. |
| indicator | true | show indicator or not |
| currentIndex | 1 | the index of current active item, strat from 1. |
| Api Name | Description | Arguments |
|---|---|---|
| refresh | refresh the compoennt's status. All states will be recalculated. | - |
| goToPage | Go to the specified page. | (pageIndex: Number, animate: Boolean) |
| prev | go to pre page. | |
| next | go to next page. |
WangYi7099(Yves Wang)
MIT