🐱🐱🐱 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：

| name | type | default | description | | --------------- | -------------------------------- | ---------- | ---------------------------------------------------------------------- | | items | list | [] | List of items in loop | | item-per-page | number | 5 | List of items in one page | | centerMode | Object | CENTER_MODE_DEFAULT_CONFIG | Allow to center carousel item with partial prev/next slides | | indicators-config | Object | INDICATORS_DEFAULT_CONFIG | define carousel indicators item size |

INDICATORS_DEFAULT_CONFIG

property | type | value | description --- | --- | --- | --- size | number | 16 | size of indicators in pixel color | string | '#d6d6d6' | color of indicators (hex, rgb, etc) activeColor | string | '#0095da' | color of active indicator (hex, rgb, etc) hideIndicators | boolean | false | show and hide carousel indicators prefix | string | '' | add prefix for :key item name

INDICATORS_DEFAULT_CONFIG

property | type | value | description --- | --- | --- | --- enabled | boolean | false | enable center mode carousel paddingCenter | number | 10 | sizes of padding in percentage

Slots

slot | slot-scope | description --- | --- | --- item | data, index | customize the design of carousel item prev-navigation | prev | customize slide left navigation next-navigation | next | customize slide right navigation

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