52 lines
1.2 KiB
JavaScript
52 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);
|
||
|
|
};
|