58 lines
No EOL
1.3 KiB
JavaScript
58 lines
No EOL
1.3 KiB
JavaScript
new Vue({
|
|
el: "#app",
|
|
data: {
|
|
files: [],
|
|
index: 0,
|
|
timeout: null,
|
|
carouselTimeout: 10000,
|
|
carouselActive: true
|
|
},
|
|
methods: {
|
|
next: function () {
|
|
this.carouselActive = true;
|
|
clearTimeout(this.timeout);
|
|
setTimeout(() => this.carousel(), this.carouselTimeout*2);
|
|
if (this.index + 1 < this.files.length) {
|
|
this.index++;
|
|
} else {
|
|
this.index = 0;
|
|
}
|
|
},
|
|
prev: function () {
|
|
this.carouselActive = true;
|
|
clearTimeout(this.timeout);
|
|
setTimeout(() => this.carousel(), this.carouselTimeout*2);
|
|
if (this.index - 1 >= 0) {
|
|
this.index--;
|
|
} else {
|
|
this.index = this.files.length - 1;
|
|
}
|
|
},
|
|
carousel: function (time = this.carouselTimeout) {
|
|
this.timeout = setTimeout(() => {
|
|
this.next();
|
|
this.carousel();
|
|
}, time);
|
|
},
|
|
loadData: function () {
|
|
fetch('api/files').then(response => response.json()).then(
|
|
data => {
|
|
this.files = data.resource;
|
|
this.carousel();
|
|
}
|
|
)
|
|
},
|
|
toggleCarousel: function () {
|
|
if (this.carouselActive) {
|
|
this.carouselActive = false;
|
|
clearTimeout(this.timeout);
|
|
} else {
|
|
this.carouselActive = true;
|
|
this.carousel();
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.loadData();
|
|
}
|
|
}) |