vue-simple-carousel

Simple carousel slider for Vue.js 3

Installation

npm install vue-simple-carousel

or

yarn add vue-simple-carousel

Usage

<template>
  <simple-carousel :items="photos">
    <template #default="{ item, index }">
      <img :src="item" :alt="index">
    </template>
  </simple-carousel>
</template>

<script>
import SimpleCarousel from 'vue-simple-carousel';
import { defineComponent } from 'vue';

export default defineComponent({
  components: {
    SimpleCarousel,
  },
  setup() {
    return {
      photos: [
        'https://via.placeholder.com/150/0000FF/808080?Text=Test%20Image%201',
        'https://via.placeholder.com/150/FF0000/FFFFFF?Text=Test%20Image%202',
        'https://via.placeholder.com/150/FFFF00/000000?Text=Test%20Image%203',
        'https://via.placeholder.com/150/000000/FFFFFF/?text=Test%20Image%204',
      ]
    }
  }
});
</script>

SimpleCarouselContainer props

Attribute | Type | Default | Description :---|:---:|:---:|:--- items | Array | | List of slides (required) modelValue | Number | 0 | Current slide index perPage | Number / [Number, Number][] | * 1* | Number of slides per page. :per-page="3" or :per-page=[[640, 2], [720, 3]] for several endpoints slideByItem | Boolean | false | Slide by one item if true, or by full page if false loop | Boolean | false | Flag to make the carousel loop around when it reaches the end. adjustable | Boolean | false | Adjust the height of the wrapper to the height of the visible slides sideNav | Boolean | false | Show side navigation buttons pages | Boolean | false | Show pages navigation dots | Boolean | false | Show dots navigation

SimpleCarouselContainer events

Event name | Description | Parameter :---|:---|:---: update:modelValue | Emitted when current index changed | Current index Number change-per-page | Emitted when current per page number changed | Current per page number Number