const gap = 16;

const carousel = document.getElementById("carousel"),
content = document.getElementById("carousel-content"),
next = document.getElementById("carousel-next"),
prev = document.getElementById("carousel-prev");

next.addEventListener("click", e => {
carousel.scrollBy(width + gap, 0);
if (carousel.scrollWidth !== 0) {
	prev.setAttribute('style', 'display: flex !important');
}
if (content.scrollWidth - width - gap <= carousel.scrollLeft + width) {
	next.setAttribute('style', 'display: none !important');
}
});
prev.addEventListener("click", e => {
carousel.scrollBy(-(width + gap), 0);
if (carousel.scrollLeft - width - gap <= 0) {
	prev.setAttribute('style', 'display: none !important');
}
if (!content.scrollWidth - width - gap <= carousel.scrollLeft + width) {
	next.setAttribute('style', 'display: flex !important');
}
});

let width = carousel.offsetWidth;
window.addEventListener("resize", e => (width = carousel.offsetWidth));