For this Vue component, I attempted to create a slideshow.
The process is as follows:
1) Creating an array of all image sources to be included (array: pictures)
2) Initializing a variable(Count) to 0, starting from the beginning.
3) Adding v-bind:src="pictures[count]" to an img tag to dynamically change the image source based on the count variable.
4) Implementing functions on 2 buttons for moving backwards and forwards through the images.
<template>
<div>
<img v-bind:src="pictures[count]" alt="">
<button @click="Switching(1)">Forward</button>
<button @click="Switching(-1)">Back</button>
<p>{{this.count + 1}}</p>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
pictures: [
"http://www.hotel-bb.com/image.htm?id=93652",
"https://s-ec.bstatic.com/images/hotel/max1280x900/681/68184730.jpg",
"https://images.all-free-download.com/images/graphiclarge/hd_picture_of_the_beautiful_natural_scenery_03_166249.jpg",
"https://images.all-free-download.com/images/graphiclarge/the_beach_at_dusk_couple_of_picture_165871.jpg"
],
stop: false
};
},
methods: {
Switching: function(n) {
this.count += n;
if (this.count > this.pictures.length - 1) {
this.count = 0;
} else if (this.count < 0) {
this.count = this.pictures.length - 1;
}
}
}
};
</script>
<style scoped>
@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
img {
max-width: 800px;
height: 500px;
animation: 1s ease-out 0s 1 slideInFromLeft;
}
</style>
It is functioning correctly. However, the issue arises when I attempt to add animations. The animations only work on the first loaded image, and do not animate when switching between images using the buttons.
I have tried transition: 0.5s, animation, and Keyframes but none seem to work. My assumption is that the images don't appear instantaneously so the animation doesn't trigger immediately. How can I resolve this?