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