convenia/vue-convenia-carousel

:racehorse: a responsive, touch-friendly and lightweight carousel component for Vue.js

vue-coerousel ✅

✨ Example✨

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