A content/image slideshow with touch support and fade/slide effect made with vuejs
npm install --save @chifi49/vue-slideshow
or
<script src="vue-slideshow.umd.min.js"></script>
<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:{
animation:'fade',//fade or slide,
autoplay:true, //true or false
minHeight: 400, //default to 100% of window viewport height
maxHeight: 600, //default to 100% of window viewport height
nav:{
visible:true,
borderColor:'#fff',
arrowColor:'#fff',
backgroundColor:'transparent',
position:{
vertical:'middle', //top, middle, bottom
}
},
pager:{
visible:true,
mode:'bullets',//defaults to bullets (bullets or counter)
borderColor:'#fff',//defaults to #fff
backgroundColor:'#000',//defaults to transparent
borderColor:'#fff', //defaults to #fff
size: 12, //defaults to 12 only for 'bullets' mode
position:{
vertical:'bottom', //bottom or top
horizontal:'center' //left, center, right
}
},
thumbs:{
visible:true,
width:100,
height:70
}
}
}
}
}
</script>
<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>
<vueslideshow ref="slider">
......
</vueslideshow>
var slider = this.$refs['slider'];
slider.nextSlide()
slider.previousSlide()
slider.firstSlide()
slider.lastSlide()
slider.moveTo(3)
move to 3rd slide
slider.showThumbs()
slider.hideThumbs()
slider.fullScreen()
slide.getCurrentIndex
slider.getCurrentContent