vue-cat-carousel

🐱🐱🐱 Vue-Cat-Carousel 🐱🐱🐱

Simple, customizable, reactive and lightest Carousel

Install

npm i -S vue-cat-carousel
or
npm install --save vue-cat-carousel

Preview

Desktop Preview

Mobile Preview

Usage

Plugin install:

Global install

import Vue from 'vue'
import CatCarousel from 'vue-cat-carousel'

Vue.use(CatCarousel)

Local install

components: {
  CatCarousel: () => import('vue-cat-carousel')
}

How to use it in HTML

<cat-carousel
    :items="items"
    :item-per-page="5"
    :indicators-config="{activeColor: '#000', size: 10, color: '#d1d1d1', hideIndicators: false}"
  >
    <template
      slot="item"
      slot-scope="{data, index}"
    >
      <div class="item">{{index}} {{data.name}} </div>
    </template>
  </cat-carousel>

import { CatCarousel } from 'vue-cat-carousel'

new Vue({
  el: 'body',
  components: {
    CatCarousel
  },
  data() {
    return {
      items: [{name: 'hans'}, {name: 'sagita'}]
    }
  }
})

Props

Slider：

INDICATORS_DEFAULT_CONFIG

INDICATORS_DEFAULT_CONFIG

Slots

Previous navigation:

<cat-carousel
    :items="items"
    :item-per-page="5"
    :indicators-config="{activeColor: '#000', size: 10, color: '#d1d1d1', hideIndicators: false}"
  >
    <template
      slot="prev-navigation"
      slot-scope="{prev}"
    >
      <div class="custom-navigation" @click="prev"></div>
    </template>
  </cat-carousel>

Next navigation:

<cat-carousel
    :items="items"
    :item-per-page="5"
    :indicators-config="{activeColor: '#000', size: 10, color: '#d1d1d1', hideIndicators: false}"
    :prefix="'nike'"
  >
    <template
      slot="prev-navigation"
      slot-scope="{next}"
    >
      <div class="custom-navigation" @click="next"></div>
    </template>
  </cat-carousel>

Center mode carousel:

<cat-carousel
    :items="items"
    :item-per-page="5"
    :centerMode="{enabled: true, paddingCenter: 10}"
    :indicators-config="{activeColor: '#000', size: 10, color: '#d1d1d1', hideIndicators: false}"
  >
  </cat-carousel>

License

MIT