https://github.com/yvescoding/vuescroll-carousel
A carousel plugin based on vuescroll.
https://github.com/yvescoding/vuescroll-carousel
carousel carousel-plugin vuescroll vuescroll-carousel
Last synced: 24 days ago
JSON representation
A carousel plugin based on vuescroll.
- Host: GitHub
- URL: https://github.com/yvescoding/vuescroll-carousel
- Owner: YvesCoding
- Created: 2018-12-19T12:25:24.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-07T06:53:44.000Z (almost 7 years ago)
- Last Synced: 2025-01-30T07:12:17.621Z (about 1 year ago)
- Topics: carousel, carousel-plugin, vuescroll, vuescroll-carousel
- Language: Vue
- Homepage: https://vuescrolljs.yvescoding.org/demo/#carousel
- Size: 154 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.MD
Awesome Lists containing this project
README
# vuescroll-carousel
## Introduction
vuescroll-carousel is a carousel plugin based on **^vuescroll@4.9.0**.
It seems like [`swiper`](https://github.com/nolimits4web/swiper). You can see the guide below.
## Demo
- [Live Demo](https://codepen.io/wangyi7099/pen/OrQoXK)
- See the **Demo** fold of this repo.
## Get Started
1. You should install `Vue@2.x` , `vuescroll@4.9.0+` and `vuescroll-carousel` , and registry the plugins.
```bash
npm i vue vuescroll vuescroll-carousel -S
```
```javascript
import 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);
```
2. Wrap the element and that's all.
```html
{{i}}
```
## Props and Api
### Props
| 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
| 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. |
## Author
WangYi7099(Yves Wang)
## License
**MIT**