@chifi49/vue-slideshow
Version:
content/image slideshow, carousel or swiper made with vuejs
227 lines (203 loc) • 5.51 kB
Markdown
# vue-slideshow
a slideshow/carousel/swiper made with vuejs
## Installation
`npm install @chifi49/vue-slideshow`
or
`<script src="vue-slideshow.umd.min.js"></script>`
## Usage
Each slide should be wrapped in a div with a class attribute content
`<div class='content'>`
If you wish to add content (text and buttons e.t.c) follow the below format
````
<div class="content">
<img src="./images/1.jpg" />
<div >
<div>
<div>
<!--your content goes here - nested inside 3 divs-->
<h2>Title</h2>
<h4>Subtitle</h4>
<p>paragraph</p>
<button>Clicked</button>
</div>
</div>
</div>
</div>
````
#### full setup
````
<template>
<vueslideshow :params="slideshowParams">
<div class="content">
<img src="./images/1.jpg" />
</div>
<div class="content">
<img src="./images/2.jpg" />
</div>
<div class="content">
<img src="./images/3.jpg" />
</div>
</vueslideshow>
</template>
<script>
import vueslideshow from 'chifi49/vue-slideshow';
export default{
components:{
vueslideshow
},
data:function(){
return {
slideshowParams:{
fullscreen:true, //shows full screen icon on top right
dragEnabled:true, //can drag the content to slide to previous or next content
animation:'fade', //slide or fade
nav:{
visible:true,
arrowColor:'#fff',
backgroundColor:'transparent',
borderColor:'#fff'
},
pager:{
visible:true,
mode:'bullets', //counter or bullets
backgroundColor:'#fff',
color:'#000',
borderColor:'#fff',
position:{
vertical:'bottom' //top or bottom
}
},
thumbs:{
visible:true,
width:100,
height:70
}
}
}
}
}
</script>
````
## Override Content (navigation arrow left and right)
````
<template>
<vueslideshow>
<div class="content">
</div>
<!--slots for nav left and nav right-->
<span slot="nav-left">left</span>
<span slot="nav-right">right</span>
</vueslideshow>
</template>
````
## Override full screen icon
````
<template>
<vueslideshow>
<button slot="fullscreen">open full</button>
</vueslideshow>
</template>
````
### Events
```
<template>
<vueslideshow
@inited = 'inited'
@beforeAnimate = 'beforeAnimate'
@animated = 'animated'
@firstSlide = 'firstSlide'
@previousSlide = 'previousSlide'
@nextSlide = 'nextSlide'
@lastSlide = 'lastSlide'
@enterFullScreen = 'enterFullScreen'
@exitFullScreen = 'exitFullScreen'
@pageSelected = 'pageSelected'
@thumbSelected = 'thumbSelected'
@dragging = 'dragging'
>
...
</vueslideshow>
</template>
<script>
export default{
methods:{
inited:function(params){
var instance = params.instance;
},
animated:function(params){
},
beforAnimate:function(params){
},
firstSlide:function(params){
var instance = params.instance;
var fromIndex = params.index;
var toIndex = params.newindex;
},
nextSlide:function(params){
var instance = params.instance;
var fromIndex = params.index;
var toIndex = params.newindex;
},
previousSlide:function(params){
var instance = params.instance;
var fromIndex = params.index;
var toIndex = params.newindex;
},
lastSlide:function(params){
var instance = params.instance;
var fromIndex = params.index;
var toIndex = params.newindex;
},
enterFullScreen:function(params){
var instance = params.instance;
},
exitFullScreen:function(params){
var instance = params.instance;
},
pageSelected:function(params){
var instance = params.instance;
var newindex = params.index;
},
thumbSelected:function(params){
var instance = params.instance;
var newindex = params.index;
},
dragging:function(params){
var instance = params.instance;
var startX = params.startX;
var currentX = params.currentX;
var index = params.index;
var toindex = params.newindex; // its -1 if we have not decided to move based on drag ratio 25%
}
}
}
</script>
```
### Methods
```
<vueslideshow ref="slider">
......
</vueslideshow>
var slider = this.$refs['slider'];
```
#### nextSlide
`slider.nextSlide()`
#### previousSlide
`slider.previousSlide()`
#### firstSlide
`slider.firstSlide()`
#### lastSlide
`slider.lastSlide()`
#### moveTo
`slider.moveTo(3)`
move to 3rd slide
#### showThumbs
`slider.showThumbs()`
#### hideThumbs
`slider.hideThumbs()`
#### fullScreen
`slider.fullScreen()`
#### getIndex (zero based)
`slide.getCurrentIndex`
#### getCurrentContent
`slider.getCurrentContent`