const gap = 16;

const hdQlcarousel = document.getElementById("hd-ql-carousel"),
content = document.getElementById("hd-ql-carousel-content"),
next = document.getElementById("hd-ql-carousel-next"),
prev = document.getElementById("hd-ql-carousel-prev");

next.addEventListener("click", e => {
hdQlcarousel.scrollBy(width + gap, 0);
if (hdQlcarousel.scrollWidth !== 0) {
	prev.setAttribute('style', 'display: flex !important');
}
if (content.scrollWidth - width - gap <= hdQlcarousel.scrollLeft + width) {
	next.setAttribute('style', 'display: none !important');
}
});
prev.addEventListener("click", e => {
hdQlcarousel.scrollBy(-(width + gap), 0);
if (hdQlcarousel.scrollLeft - width - gap <= 0) {
	prev.setAttribute('style', 'display: none !important');
}
if (!content.scrollWidth - width - gap <= hdQlcarousel.scrollLeft + width) {
	next.setAttribute('style', 'display: flex !important');
}
});

let width = hdQlcarousel.offsetWidth;
window.addEventListener("resize", e => (width = hdQlcarousel.offsetWidth));