vue-coerousel ✅

Install

yarn add vue-coerousel

Use

<template>
  <coerousel :per-page="2" :breakpoints="breakpoints" :is-loopable="false">
    <coerousel-item v-for="(option, index) in options" :key="index">
      <div class="ball" :style="{ backgroundColor: option.color }" />
    </coerousel-item>
  </coerousel>
</template>

<script>
import Coerousel from 'vue-coerousel'

export default {
  components: { Coerousel },

  data () {
    return {
      options: [
        { color: 'blue' },
        { color: 'yellow' },
        { color: 'red' },
        { color: 'black' },
        { color: 'pink' },
        { color: 'turquoise' },
        { color: 'magenta' },
        { color: 'white' },
        { color: 'orange' },
        { color: 'green' },
        { color: 'purple' },
        { color: 'cyan' },
        { color: 'lime' },
        { color: 'lightblue' }
      ],
      breakpoints: {
        1024: { perPage: 4 },
        768: { perPage: 3 },
        640: { perPage: 2 },
        320: { perPage: 1 }
      }
    }
}
</script>

Props

Name	type	required	default
pagination	Boolean	`false`	`true`
perPage	`(String, Number)`	`false`	`1`
isDraggable	Boolean	`false`	`true`
isLoopable	Boolean	`false`	`false`
perPage	`(String, Number)`	`false`	`1000`
breakpoints	`Object`	`false`	`{}`

Contribution

@convenia team

viniazvd/vue-coerousel

vue-coerousel ✅

Props

Contribution