/home/vianto5/heredit.mx/sliders/descripcion
Edit: /home/vianto5/heredit.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);