As a beginner in vue js, I am faced with the challenge of displaying two images simultaneously on my website. Each image has unique settings such as imagePosition (left or right) and imagedisplayTime (display for 2 seconds). Let's consider this scenario where I have two images:
Image1: settings (display on the right side, 2 seconds)
Image2: settings (display on the left side, 2 seconds)
To implement the display of these images on the website, I am using the following function:
callablelayout_assistant: function(new_layout, new_index, loop_time){
if (new_layout === 1) {
var position = this.loop_objects[new_index].position;
if (position === 0) {
this.left_timer = window.setTimeout(
this.leftLoop.bind(undefined, new_index, new_layout), loop_time);
} else if (position === 1) {
this.right_timer = window.setTimeout(
this.rightLoop.bind(undefined, new_index, new_layout), loop_time);
}
} else if (new_layout === 2) {
var position = this.loop_objects[new_index].position;
if (position === 0) {
this.left_timer = window.setTimeout(
this.leftLoop.bind(undefined, new_index, new_layout), loop_time);
} else if (position === 1) {
this.right_timer = window.setTimeout(
this.rightLoop.bind(undefined, new_index, new_layout), loop_time);
} else if (position == 2) {
this.bottom_timer = window.setTimeout(
this.bottomLoop.bind(undefined, new_index, new_layout), loop_time);
}
}
else {
clearTimeout(this.timer)
this.timer = window.setTimeout(
this.fullLoop.bind(undefined, new_index, new_layout), loop_time);
}
},
In this function, I determine the image’s position to call the appropriate function such as "rightLoop" for the right side and "leftLoop" for the left side. However, the issue I face is that only one image is displayed at a time due to the nature of "setTimeout" function which displays the next image based on the previous one's loop time.
My goal is to find a way to display both images simultaneously on the web screen while respecting their individual display times. Any suggestions or guidance would be greatly appreciated!