vue-l-carousel

A responsive carousel(namely slider or swiper) component for Vue.js v2.x+. Live demo

Pull requests are welcome :)

License

LGPL-V3

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

npm install vue-l-carousel

Usage

    <carousel :auto="3000" :watch-items="list">
        <carousel-item v-for="(item, index) in list">
            <p>CarouselItem{{index}}, URL is {{item.url}}</p>
        </carousel-item>

        <div slot="before">Insert node before</div>
        <div slot="after">Insert node after</div>
    </carousel>

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

Notice:

[1]: Required props
[2]: Changing it will cause render-update event.

events

Well, what's next?

• ~~Load resources via AJAX~~ (For single responsibility, I recommend you to composite with other libraries, v-l-lazyload for example instead)
• Vertical orientation support
• Add components for dots
• Multiple items in the same page
• More elegant way to test behaviors