1.1.0 • Published 3 years ago

vue-l-carousel v1.1.0

Weekly downloads
477
License
LGPL-3.0-only
Repository
github
Last release
3 years ago

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

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
1.1.0

3 years ago

1.0.1

4 years ago

1.0.0

5 years ago