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