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

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.
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 for example instead)
• Vertical orientation support
• Add components for dots
• Multiple items in the same page
• More elegant way to test behaviors