https://github.com/lsycxyj/vue-l-carousel
A responsive carousel(namely slider or swiper) component for Vue.js v2.x+.
https://github.com/lsycxyj/vue-l-carousel
carousel slide swipe vue
Last synced: 3 months ago
JSON representation
A responsive carousel(namely slider or swiper) component for Vue.js v2.x+.
- Host: GitHub
- URL: https://github.com/lsycxyj/vue-l-carousel
- Owner: lsycxyj
- License: lgpl-3.0
- Created: 2017-01-31T16:42:59.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-06-30T10:44:03.000Z (over 7 years ago)
- Last Synced: 2025-06-27T22:16:50.708Z (3 months ago)
- Topics: carousel, slide, swipe, vue
- Language: JavaScript
- Size: 808 KB
- Stars: 55
- Watchers: 4
- Forks: 21
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-l-carousel
> A responsive carousel(namely slider or swiper) component for Vue.js v2.x+. [Live demo](https://cdn.rawgit.com/lsycxyj/vue-l-carousel/master/demo/index.html)
### Pull requests are welcome :)
[](https://codecov.io/github/lsycxyj/vue-l-carousel?branch=master)
## License
LGPL-V3
[](http://www.gnu.org/licenses/lgpl-3.0)
## Features
- Responsive carousel component for both desktop and mobile devices.
- No extra dependencies except Vue
- High performance with GPU acceleration and transition animations
- Available to be styled with CSS
- Event-based API and notification
## Installation
[](https://npmjs.org/package/vue-l-carousel)
`npm install vue-l-carousel`
## Usage
```html
CarouselItem{{index}}, URL is {{item.url}}
Insert node before
Insert node after
```
```javascript
import { Carousel, CarouselItem } from 'vue-l-carousel'
export default {
data() {
return {
auto: 3000,
list: [
{
url: 'url1'
},
{
url: 'url2'
},
{
url: 'url3'
},
]
}
},
components: {
'carousel': Carousel,
'carousel-item': CarouselItem
}
}
```
## Carousel configs and API
### props
Name
Type
Default
Description
prev-html
String
<
HTML content of the previous button.
next-html
String
>
HTML content of the next button.
speed
Number
300
The time of the transition animation. In ms.
loop[2]
Boolean
false
It can go to next/previous slide at the ends if it's set to true. It works only the items' length more than 1.
rewind[2]
Boolean
false
Rewind to the other end instead of endless loop, but you can only go to the other end by previous or next button, if it's set to true. It works only loop is set to true.
mouse-drag
Boolean
false
It can be drag by mouse if it's set to true.
touch-drag
Boolean
true
It can be drag by touch if it's set to true.
auto
Number
0
Autoplay interval. In ms. 0 for no autoplay.
dots
Boolean
true
Pagination is available if it's set to true.
dots-style
[Object, String, Array]
''
Style of v-carousel-dots
watch-items[1][2]
Array
[]
The original data list used to render the CarouselItems. The component will rerender if this property changes.
Notice:
[1]: Required props
[2]: Changing it will cause `render-update` event.
### events
Name
Direction
Arguments
Description
changed-index
Emit
{
index, // Current index
total, // Total amount of items
item, // Item data of current index
}
It emits when index changed.
render-updated
Emit
-
It emits when render updated.
next
Receive
-
Make carousel go to the next slide.
prev
Receive
-
Make carousel go to the previous slide.
to
Receive
index
Make carousel go to the specific index of slide.
## Well, what's next?
- ~~Load resources via AJAX~~ (For single responsibility, I recommend you to composite with other libraries, [v-l-lazyload](https://github.com/lsycxyj/vue-l-lazyload) for [example](https://cdn.rawgit.com/lsycxyj/vue-l-carousel/master/demo/index_with_lazyload.html) instead)
- Vertical orientation support
- Add components for dots
- Multiple items in the same page
- More elegant way to test behaviors