/home/vianto5/haciendasanpancho.mx/sliders/amenidades
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);