Wikiki/bulma-carousel

Carousel with multiple data items does not resize when resizing browser

Closed this issue · 4 comments

When you have a carousel with multiple items shown, then when the browser size is changed, the carousel does not resize

It happened to me, whenever i'm trying to resize the browser, the carousel didn't work well. It's even happened on its doc site, try to refresh the browser couple times and resize the window. This happened.
I hope they fix it asap :

screenshot_2

Hi, I'll have a loot at it soon

tmm1 commented

I think this is probably due to fixed height set in fade mode:

// If animation is fade then force carouselContainer size (due to the position: absolute)
if (this.element.classList.contains('carousel-animate-fade') && this.items.length) {
let img = this.items[0].querySelector('img');
let scale = 1;
if (img.naturalWidth) {
scale = width / img.naturalWidth;
this.container.style.height = (img.naturalHeight * scale) + 'px';
} else {
img.onload = () => {
scale = width / img.naturalWidth;
this.container.style.height = (img.naturalHeight * scale) + 'px';
}
}
}

FWIW, this behavior also happens when only showing single images too (set to fade)