<script> export default { name: "Slider", data() { return { images: [ "https://cdn.pixabay.com/photo/2015/12/12/15/24/amsterdam-1089646_1280.jpg", "https://cdn.pixabay.com/photo/2016/02/17/23/03/usa-1206240_1280.jpg", "../assets/sample-1.jpg" "https://cdn.pixabay.com/photo/2016/12/04/19/30/berlin-cathedral-1882397_1280.jpg" ], currentIndex: 0 }; }, methods: { next: function() { this.currentIndex += 1; }, prev: function() { this.currentIndex -= 1; } }, computed: { currentImg: function() { return this.images[Math.abs(this.currentIndex) % this.images.length]; } } }; </script>vue.js a continuación
<template> <div> <transition-group name="fade" tag="div"> <div v-for="i in [currentIndex]" :key="i"> <img :src="currentImg" /> </div> </transition-group> <a class="prev" @click="prev" href="#">❮ Previous</a> <a class="next" @click="next" href="#">❯ Next</a> </div>Simplemente se desplaza hacia la parte superior cada vez que hago clic en anterior o siguiente, no puedo entender por qué. Además, no he podido obtener ninguna de mis propias imágenes de los activos para que aparezcan en el control deslizante y no estoy seguro de por qué no es posible recuperarlas de esta manera (como en la muestra-1.jpg) Gracias.
href="#"v-for o transition-group . Una simple transition con mode="out-in" es suficiente. Pones la key de la imagen actual, por lo que vue siempre sabe si la imagen se reemplaza para que pueda hacer una transición No coloque imágenes en la carpeta de assets . Será mejor que lo pongas en la carpeta static .
Luego puede acceder a su imagen como /sample-1.jpg
new Vue({ name: "Slider", el: "#app", data() { return { images: [ "https://cdn.pixabay.com/photo/2015/12/12/15/24/amsterdam-1089646_1280.jpg", "https://cdn.pixabay.com/photo/2016/02/17/23/03/usa-1206240_1280.jpg", "/sample-1.jpg", "https://cdn.pixabay.com/photo/2016/12/04/19/30/berlin-cathedral-1882397_1280.jpg" ], currentIndex: 0 }; }, }) .v-enter-active, .v-leave-active { transition: opacity 1s ease; } .v-enter, .v-leave-to { opacity: 0; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <a class="prev" @click="currentIndex--" v-if="currentIndex > 0">❮ Previous</a> <a class="next" @click="currentIndex++" v-if="currentIndex < images.length - 1">❯ Next</a> <transition name="v" mode="out-in"> <img :key="images[currentIndex]" :src="images[currentIndex]" /> </transition> </div>