JSFiddle - React, Tailwind, and code Playground

by Asif Sharif Shahid

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js "></script>
<body>

<image-slider>
    <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]"
         v-on:mouseover="stopRotation"
         v-on:mouseout="startRotation"
         />
  </div>
</image-slider>

</body>

CSS

.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: 'image-slider',
    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);
        },

        stopRotation: function() {
            clearTimeout(this.timer);
            this.timer = null;
        },

        next: function() {
            this.currentNumber += 1
        },
        prev: function() {
            this.currentNumber -= 1
        }
    }
});