script.js

const newsCards = document.querySelector('.news-cards');
const arrwBtns = document.querySelectorAll('.news-arrow');
const firstCardWidth = newsCards.querySelector(".news-card").offsetWidth;

let isDragging = false, startX, startScrollLeft;

arrwBtns.forEach(btn => {
    btn.addEventListener("click", () => {
        newsCards.scrollLeft += btn.id === "left-arrow" ? -firstCardWidth : firstCardWidth;
    })
});

const dragStart = (e) => {
    isDragging = true;
    newsCards.classList.add("dragging");
    startX = e.pageX;
    startScrollLeft = newsCards.scrollLeft;
}

const dragging = (e) => {
    if (!isDragging) {return}
    newsCards.scrollLeft = startScrollLeft - e.pageX + startX;
}

const dragStop = (e) => {
    isDragging = false;
    newsCards.classList.remove("dragging");
}

newsCards.addEventListener("mousedown", dragStart);
newsCards.addEventListener("mousemove", dragging);
newsCards.addEventListener("mouseup", dragStop);