vue-crsl v0.1.2

vue-crsl

Try it out here: Vue Carousel

🚀 Usage

npm i vue-crsl

Vue

import Carousel from 'vue-crsl'
export default {
  components: {
    Carousel
  }
}

Nuxt

// Create a plugin - ~/plugins/vue-crsl.js
import Vue from 'vue'
import Carousel from 'vue-crsl'

Vue.component('Carousel', Carousel)

// nuxt.config.js
plugins: [
  {src: '~/plugins/crsl.js', ssr: false}
]

Slot

Custom arrows

<Carousel ref="carousel">
  <img src="...">
  <img src="...">
  <img src="...">
  <template v-slot:arrows>
    <button @click="$refs.carousel.prev()" :disabled="$refs.carousel.arrowsDisabled || $refs.carousel.isArrowDisabled.prev">Prev</button>
    <button @click="$refs.carousel.next()" :disabled="$refs.carousel.arrowsDisabled || $refs.carousel.isArrowDisabled.next">Next</button>
  </template>
</Carousel>

Custom dots

<Carousel ref="carousel">
  <img src="...">
  <img src="...">
  <img src="...">
  <template v-slot:dots="{activeIndex, items}">
    {{ activeIndex }}
  </template>
</Carousel>

Props

Events

Methods