vue-basic-carousel

A basic image carousel component for Vue.js

Installation

npm install vue-basic-carousel

Usage

In your Vue.js application, import the vue-basic-carousel and register it globally or locally.

import VueBasicCarousel from 'vue-basic-carousel'

Vue.use(VueBasicCarousel);

Then, use the vue-basic-carousel component in your template.

<vue-basic-carousel :slides="slides" :heigth="300" :width="300"/>

...

data() {
    return {
        slides: [
            { src: 'image1.jpg', alt: "First slide", label: "First slide" },
            { src: 'image2.jpg', alt: "Second slide", label: "Second slide" },
            { src: 'image3.jpg', alt: "Third slide", label: "First slide" }
        ],
        ...
    }
}
...

Props

| Prop | Type | Required | Description | |-------------|--------|----------|------------------------------------------------------------------------------------------------------------------| | slides | Array | Yes | An array of objects representing the slides. Each object should have a src (string) and an optional alt (string) and label (string) properties. | | width | Number | No | Width of carousel. | | heigth | Number | No | Height of carousel. (default 500px) |

Methods

| Method | Description | |------------|-------------| | prev() | Navigate to the previous slide. | | next() | Navigate to the next slide. |

Nuxt.js

To use the vue-basic-carousel plugin in your Nuxt.js application, you will need to:

1. Install the package via npm or yarn:

npm install vue-basic-carousel

2. Register the plugin in your nuxt.config.js file:

module.exports = {
  ...
  plugins: [
    '~/plugins/vue-basic-carousel'
  ],
  ...
}

3. Create a new file in the plugins directory called vue-basic-carousel.js and register the component globally:

import Vue from 'vue'
import VueBasicCarousel from 'vue-basic-carousel'
Vue.use(VueBasicCarousel)