0.1.2 • Published 6 years ago
vue-awesome-slides v0.1.2
vue-awesome-slides
why another slides
most slides are implement by set a visible view,make all slides in one row and use position or transform to make the slide show in the view. the problem of this method is when you in slide one and you select slide three pager, the slide two must cross the view,this is the reason why another slides. I use 'debut' concept to resolve this problem,you can find it in code.
Project setup
npm i vue-awesome-slides --saveProject use
import Slide from 'vue-awesome-slides/component/Slides.vue'
# default use
<Slides :slides="slidesData" :slidesConfig="config" />
#custom slide
<Slides :slides="slidesData" :slidesConfig="config" />
<template slot="slide" slot-scope="props">
# your custom slide template, you can get data from props.slide
<div>{{props.slide.xxx}}</div>
</template>
#custom slide control
<Slides :slides="slidesData" :slidesConfig="config" />
<template slot="slide-pager-item" slot-scope="props">
# your custom slide template, you can get data from props.slide
<div>{{props.slide.xxx}}</div>
</template>demo
with vue cli 3.0 prototyping,you can start the demo quickly, just go demo directory and serve it
Props
| Name | Type | Desc |
|---|---|---|
| slides | Array | slides data |
| slidesConfig | Object | slides config |
slidesConfig
| Name | Type | Defalut | Desc |
|---|---|---|---|
| mode | String | horizontal | Type of transition between slides 'horizontal' 'vertical' 'fade' |
| autoPlay | Boolean | false | Slides will automatically transition |
| infinite | Boolean | true | If true, clicking "Next" while on the last slide will transition to the first slide and vice-versa |
| speed | Number | 500 | Slide transition duration (in ms) |
| loopTime | Number | 5000 | The amount of time (in ms) between each auto transition |
| pager | Boolean | true | If true, a pager will be added |
| controls | Boolean | true | If true, a controls will be added |
Methods
| Name | Desc |
|---|---|
| goToSlide | Performs a slide transition to the supplied slide index (zero-based) |
| goToNextSlide | Performs a "Next" slide transition |
| goToPrevSlide | Performs a "Prev" slide transition |
Events
| Name | Desc |
|---|---|
| beforeChange | when slide start transition emit |
| afterChange | when slide end transition emit |
custom
you can custom your own slide and slide pager and with vue scoped slots every slide data is back to you the slot name is slide and slide-pager-item