FM / descripcion

/home/vianto5/haciendasanpancho.mx/sliders/descripcion/

/home/vianto5/haciendasanpancho.mx/sliders/descripcion

Name	Size	Mode	Actions
index.html	1592	0644	edit dl rm
script.js	2123	0644	edit dl rm
style.css	1661	0644	edit dl rm

Edit: /home/vianto5/haciendasanpancho.mx/sliders/descripcion/script.js (2123B)

const initSlider = () => {
    const description = document.querySelector(".slider-wrapper .description");
    const sliderScrollbar = document.querySelector(".container .slider-scrollbar");
    const scrollbarThumb = sliderScrollbar.querySelector(".scrollbar-thumb");
    const maxScrollLeft = description.scrollWidth - description.clientWidth;

//Handle scrollbar thumb drag
    scrollbarThumb.addEventListener("mousedown", (e) => {
        const startX = e.clientX;
        const thumbPosition = scrollbarThumb.offsetLeft;

//Update thumb position on mouse move
        const handleMouseMove = (e) => {
            const deltaX =e.clientX - startX;
            const newThumbPosition = thumbPosition + deltaX;
            const maxThumbPosition = sliderScrollbar.getBoundingClientRect().width - scrollbarThumb.offsetWidth;

const boundedPosition = Math.max(0, Math.min(maxThumbPosition, newThumbPosition));
            const scrollPosition = (boundedPosition / maxThumbPosition) * maxScrollLeft;

scrollbarThumb.style.left = `${boundedPosition}px`;
            description.scrollLeft = scrollPosition;
            // imageList2.scrollLeft = scrollPosition;
        }

//Remove event listeners on mouse up
        const handleMouseUp = () => {
            document.removeEventListener("mousemove", handleMouseMove);
            document.removeEventListener("mouseup", handleMouseUp);
        }

//Add event listeners for drag interaction
        document.addEventListener("mousemove", handleMouseMove);
        document.addEventListener("mouseup", handleMouseUp);
    });

//Update scrollbar thumb position based on image scroll
    const updateScrollThumbPosition = () => {
        const scrollPosition = description.scrollLeft;
        const thumbPosition = (scrollPosition / maxScrollLeft) * (sliderScrollbar.clientWidth - scrollbarThumb.offsetWidth);
        scrollbarThumb.style.left = `${thumbPosition}px`;

}

description.addEventListener("scroll", () => {
        updateScrollThumbPosition();
    });

}

window.addEventListener("load", initSlider);

cmd: