You can do this with VueJS. Take a look at the example below. You can see two examples: one of them is the accepted code for your case (to make it a slide). And the other is a simple image slider that goes through an array of images in 3 seconds.
It is important to note that we are completing the image in for element to force the element to be destroyed, because otherwise your elements will not be removed from the DOM and will not transition (virtual DOM).
For a better understanding of transitions in VueJS, we recommend that you check out the getting started guide - transition section .
new Vue({ el: '#demo', data: { message: 'Click for slide', show: true, imgList: [ 'http://via.placeholder.com/350x150', 'http://via.placeholder.com/350x151', 'http://via.placeholder.com/350x152' ], currentImg: 0 }, mounted() { setInterval(() => { this.currentImg = this.currentImg + 1; }, 3000); } })
#demo { overflow: hidden; } .slide-leave-active, .slide-enter-active { transition: 1s; } .slide-enter { transform: translate(100%, 0); } .slide-leave-to { transform: translate(-100%, 0); } .img-slider{ overflow: hidden; position: relative; height: 200px; width: 400px;: } .img-slider img { position: absolute; top: 0; left: 0; bottom: 0; right:0; }
<!DOCTYPE html> <html> <head> <title>VueJS 2.0 - image slider</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="slide"> <p v-if="show">{{message}}</p> </transition> <h3> Img slider </h3> <transition-group tag="div" class="img-slider" name="slide"> <div v-for="number in [currentImg]" v-bind:key="number" > <img :src="imgList[Math.abs(currentImg) % imgList.length]"/> </div> </transition-group> </div> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <script src="script.js"></script> </body> </html>
Sicky source share