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 --save

Project 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