website/static/js/carousel.js
2023-05-18 18:35:28 +02:00

51 lines
1.2 KiB
JavaScript

var carousels = [];
class Carousel {
constructor(obj) {
this.obj = obj;
this.current = 0;
this.items = [];
this.items_widths = [];
for(var i = 0; i < this.obj.children.length; i ++) {
var item = this.obj.children[i];
if(item.classList.contains("carousel-item")) {
this.items.push(item);
this.items_widths.push(Math.min(item.offsetWidth, 128));
}
}
}
step() {
this.current = (this.current+1) % this.items.length;
var max_width = this.obj.offsetWidth;
var width = 16*this.items.length;
for(var i = 0; i < this.items.length; i ++) {
var j = (i + this.current) % this.items.length;
var item = this.items[j];
if(!item.classList.contains("carousel-hidden")) {
// Update width
this.items_widths[j] = Math.min(item.offsetWidth, 128);
}
width += this.items_widths[j];
if(width > max_width) {
item.classList.add("carousel-hidden");
} else {
this.obj.appendChild(item);
item.classList.remove("carousel-hidden");
}
}
}
}
function step_carousels() {
for(carousel of carousels) {
carousel.step();
}
}
window.onload = function() {
for(obj of document.getElementsByClassName("carousel")) {
carousels.push(new Carousel(obj))
}
step_carousels();
setInterval(step_carousels, 2000);
};