@jfm/vue-carousel
v0.1.0
Published
A Vue carousel component
Downloads
211
Readme
@jfm/vue-carousel
A Vue carousel component.
Demo
https://jiangfengming.github.io/vue-carousel/demo/
Install
npm i @jfm/vue-carousel
Usage
<template>
<main>
<Carousel class="carousel" :current-page.sync="currentPage" :total-pages.sync="totalPages" autoplay>
<Slide class="slide">slide 1</Slide>
<Slide class="slide">slide 2</Slide>
<Slide class="slide">slide 3</Slide>
</Carousel>
<button @click="currentPage = currentPage === 1 ? totalPages : currentPage - 1">backward</button>
<button @click="currentPage = currentPage === totalPages ? 1 : currentPage + 1">forward</button>
</main>
</template>
<script>
import { Carousel, Slide } from '@jfm/vue-carousel'
export default {
components: { Carousel, Slide },
data: () => ({
currentPage: 1,
totalPages: 1
})
}
</script>
<style scoped>
.carousel {
width: 400px;
height: 300px;
}
.slide {
width: 100%;
height: 100%;
}
</style>
<Carousel> options
current-page.sync
:Number
. Current page number.total-page.sync
:Number
. Total page count.autoplay
:Boolean
orNumber
(milliseconds). Iftrue
, it defaults to 3000.direction
:String
.horizontal
, orvertical
.