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="https://raw.githubusercontent.com/NomNes/vue-simple-carousel/HEAD/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 |