Novice, Paragon, Master

    vue-l-carousel

    1.1.0 • Public • Published

    vue-l-carousel

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

    Pull requests are welcome :)

    Build Status Coverage

    License

    LGPL-V3
    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

    vue-l-carousel

    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.
    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:

    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

    Install

    npm i vue-l-carousel

    DownloadsWeekly Downloads

    213

    Version

    1.1.0

    License

    LGPL-3.0-only

    Unpacked Size

    1.34 MB

    Total Files

    57

    Last publish

    Collaborators

    • lsycxyj