JSFiddle - React, Tailwind, and code Playground

by Shaun Ellis

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js "></script>
<script src="https://rawgit.com/viewdir/manifesto/master/dist/client/manifesto.bundle.js"></script>
<script src="https://rawgit.com/sdellis/manifestation-vue/master/dist/manifestation-vue.browser.js"></script>
<link rel="stylesheet" href="https://rawgit.com/sdellis/manifestation-vue/master/dist/manifestation-vue.css">
<body>
<tree></tree>
<thumbnails></thumbnails>
<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

Vue.use(ManifestationVue)
Vue.component('Tree', ManifestationVue.Tree)
Vue.component('Thumbnails', ManifestationVue.Thumbnails)

const manifestation = Object.assign(manifesto.create(JSON.stringify(manifests[0])), mixins)

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
        }
    }
});