1.1.0 • Published 3 years ago
vue-simple-carousel v1.1.0
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 |
1.1.0
3 years ago
1.0.1
4 years ago
1.0.0
4 years ago
0.4.4
4 years ago
0.4.1
5 years ago
0.4.3
5 years ago
0.4.2
5 years ago
0.4.0
5 years ago
0.3.9
5 years ago
0.3.8
5 years ago
0.3.7
5 years ago
0.3.6
5 years ago
0.3.5
5 years ago
0.3.4
5 years ago
0.3.3
5 years ago
0.3.2
5 years ago
0.3.1
5 years ago
0.3.0
5 years ago
0.2.1
5 years ago
0.2.0
5 years ago
0.1.4
5 years ago
0.1.3
5 years ago
0.1.2
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago