FM / amenidades

/home/vianto5/haciendasanpancho.mx/sliders/amenidades/

/home/vianto5/haciendasanpancho.mx/sliders/amenidades

Name	Size	Mode	Actions
index.html	2229	0644	edit dl rm
script.js	2727	0644	edit dl rm
style.css	3356	0644	edit dl rm

Edit: /home/vianto5/haciendasanpancho.mx/sliders/amenidades/script.js (2727B)

const initSlider = () => {
    const imageList = document.querySelector(".slider-wrapper .image-list");
    const slideButtons = document.querySelectorAll(".slider-wrapper .slide-button");
    const sliderScrollbar = document.querySelector(".container .slider-scrollbar");
    const scrollbarThumb = sliderScrollbar.querySelector(".scrollbar-thumb");
    const maxScrollLeft = imageList.scrollWidth - imageList.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`;
            imageList.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
    function slidePrev() {
        const scrollAmount = -(imageList.clientWidth + 8);
        imageList.scrollBy({ left: scrollAmount, behavior: "smooth" });
    }
    
    function slideNext() {
        const scrollAmount = imageList.clientWidth + 8;
        imageList.scrollBy({ left: scrollAmount, behavior: "smooth" });
    }
    
    // Asignar los event listeners
    document.getElementById("prev-slide").addEventListener("click", slidePrev);
    document.getElementById("next-slide").addEventListener("click", slideNext);

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

}

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

}

window.addEventListener("load", initSlider);

cmd: