Vue.js Card Carousel For Web

Description:

A card carousel component for Vue.js that enables the user to switch between slides just like a stacked card.

How to use it:

1. Import the component & stylesheet into the project.

import { CarouselCard, CarouselCardItem } from 'vue-carousel-card'
import 'vue-carousel-card/styles/index.css'

2. Register the component.

export default {
  components: { CarouselCard, CarouselCardItem }
}

// or SSR
import Vue from 'vue'
import {
  CarouselCard,
  CarouselCardItem
} from 'vue-carousel-card'
import 'vue-carousel-card/styles/index.css'

export default () => {
  Vue.component(CarouselCard.name, CarouselCard)
  Vue.component(CarouselCardItem.name, CarouselCardItem)
}

// nuxt.config.js
plugins: [
  '@/plugins/vue-carousel-card'
]

3. Use the component.

<CarouselCard :interval="7000" height="300px" type="card" arrow="always">
  <CarouselCardItem v-for="i in 6" :key="i">
    <h1 v-text="i"></h1>
  </CarouselCardItem>
</CarouselCard>

4. Props for the carousel.

initialIndex: { 
  type: Number, 
  default: 0 
},

height: { 
  type: String, d
  efault: '200' 
},

trigger: { 
  type: String, 
  default: 'hover' 
},

autoplay: { 
  type: Boolean, 
  default: true 
},

interval: { 
  type: Number, 
  default: 3000 
},

indicatorPosition: { 
  type: String, 
  default: 'outside' // outside/none
},

indicator: { 
  type: Boolean, 
  default: true 
},

arrow: { 
  type: String, 
  default: 'hover' // always/hover/never
},

type: String // card

5. Props for carousel items.

label: {
  type: [String, Number],
  default: ''
}

6. API.

// set active carousel item
setActiveItem(index)

// back to the prev
prev()

// go to the next
next()

Download Details:

Author: jekorx

Live Demo: https://jekorx.github.io/vue-carousel-card/

Download Link: https://github.com/jekorx/vue-carousel-card/archive/master.zip

Official Website: https://github.com/jekorx/vue-carousel-card

Last Update: September 30, 2019

Install:

# Yarn
$ yarn add vue-carousel-card

# NPM
$ npm install vue-carousel-card --save

You Might Be Interested In:

Add Comment