FM / amenidades

/home/vianto5/duettowers.mx/sliders/amenidades/

/home/vianto5/duettowers.mx/sliders/amenidades

Name	Size	Mode	Actions
index.html	413161	0644	edit dl rm
script.js	2804	0644	edit dl rm
style.css	2467	0644	edit dl rm

Edit: /home/vianto5/duettowers.mx/sliders/amenidades/script.js (2804B)

const initSlider = () => {
    const imageList1 = document.querySelector(".slider-wrapper .image-list1");
    const imageList2 = document.querySelector(".slider-wrapper .image-list2");
    const slideButtons = document.querySelectorAll(".slider-wrapper .slide-button");
    const sliderScrollbar = document.querySelector(".container .slider-scrollbar");
    const scrollbarThumb = sliderScrollbar.querySelector(".scrollbar-thumb");
    const maxScrollLeft = imageList1.scrollWidth - imageList1.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`;
            imageList1.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);
    });

//Slide images according to the slide button clicks
    slideButtons.forEach(button => {
        button.addEventListener("click", () => {
            const direction = button.id === "prev-slide" ? -1 : 1;
            const scrollAmount1 = imageList1.clientWidth * direction;
            const scrollAmount2 = imageList2.clientWidth * direction;
            imageList1.scrollBy({ left: scrollAmount1, behavior: "smooth" });
            imageList2.scrollBy({ left: scrollAmount2, behavior: "smooth" });
        });
    });

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

}

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

}

window.addEventListener("load", initSlider);

cmd: