Image Slider via Vue

https://vuejsfeed.com/blog/build-an-image-slider-with-vue-js

by Megi93

HTML

<div id="app">
    <p>
        <a @click="prev">Previous</a> || <a @click="next">Next</a>
    </p>
    <div v-for="number in [currentNumber]" transition="fade">
        <img :src="images[Math.abs(currentNumber) % images.length]" />
    </div>
</div>

CSS

img {
    width: 450px;
    height: 350px;
}
.fade-transition {
    transition: all 0.8s ease;
    overflow: hidden;
    visibility: visible;
    opacity: 1;
    position: absolute;
}

.fade-enter,
.fade-leave {
    opacity: 0;
    visibility: hidden;
}

JavaScript

new Vue({
    el: '#app',
    data: {
        images: ['http://i.imgur.com/vYdoAKu.jpg', 'http://i.imgur.com/PUD9HQL.jpg', 'http://i.imgur.com/Lfv18Sb.jpg', 'http://i.imgur.com/tmVJtna.jpg', 'http://i.imgur.com/ZfFAkWZ.jpg'],
        currentNumber: 0,
        timer: null
    },
    ready: function() {
        this.startRotation();
    },
    methods: {
        startRotation: function() {
            this.timer = setInterval(this.next, 3000);
        },
        next: function() {
            this.currentNumber += 1;
        },
        prev: function() {
            this.currentNumber -= 1;
        }
    }
});