https://youtvrs.it/wp-content/plugins/youtvrs/assets/js/scroller.js?ver=0.1

1const elements = document.querySelectorAll('.youtvrs-scroller');
2
3    elements.forEach(ele => {
4        ele.style.cursor = 'grab';
5		
6		var children = ele.children[0].children[0].children;
7		var totalWidth = 0;
8
9		for (var i = 0; i < children.length; i++) {
10			let style = getComputedStyle(children[i]);;
11			totalWidth += parseInt(children[i].offsetWidth, 10) + parseInt(style.marginLeft, 10) + parseInt(style.marginRight, 10);
12		}
13
14        let pos = { top: 0, left: 0, x: 0, y: 0 };
15
16        const mouseDownHandler = function (e) {
17            ele.style.cursor = 'grabbing';
18            ele.style.userSelect = 'none';
19
20            pos = {
21                // The current scroll
22                left: ele.scrollLeft,
23                top: ele.scrollTop,
24                // Get the current mouse position
25                x: e.clientX,
26                y: e.clientY,
27            };
28
29            document.addEventListener('mousemove', mouseMoveHandler);
30            document.addEventListener('mouseup', mouseUpHandler);
31        };
32
33        const mouseMoveHandler = function (e) {
34            // How far the mouse has been moved
35			ele.style.pointerEvents = 'none';
36            const dx = e.clientX - pos.x;
37            const dy = e.clientY - pos.y;
38
39            // Scroll the element
40            ele.scrollTop = pos.top - dy;
41            ele.scrollLeft = pos.left - dx;
42			
43			if(ele.nextElementSibling && ele.nextElementSibling.classList.contains("dway-scroller-scrollbar")) {
44				let scrollbarContainer = ele.nextElementSibling.querySelector(".dway-scroller-scrollbar");
45				let scrollbar = scrollbarContainer.querySelector(".dway-scroller-scrollbar-pin");
46				scrollbar.style.transform = 'translateX(' + (ele.scrollLeft / (totalWidth - document.body.clientWidth) * (scrollbarContainer.clientWidth - scrollbar.clientWidth)) + 'px)'
47			}
48        };
49
50        const mouseUpHandler = function () {
51            document.removeEventListener('mousemove', mouseMoveHandler);
52            document.removeEventListener('mouseup', mouseUpHandler);
53			ele.style.pointerEvents = 'initial';
54
55            ele.style.cursor = 'grab';
56            ele.style.removeProperty('user-select');
57        };
58		
59		const orizontalScrollHandler = function (e) {
60			if(ele.nextElementSibling && ele.nextElementSibling.classList.contains("dway-scroller-scrollbar")) {
61				let scrollbarContainer = ele.nextElementSibling.querySelector(".dway-scroller-scrollbar");
62				let scrollbar = scrollbarContainer.querySelector(".dway-scroller-scrollbar-pin");
63				scrollbar.style.transform = 'translateX(' + (ele.scrollLeft / (totalWidth - document.body.clientWidth) * (scrollbarContainer.clientWidth - scrollbar.clientWidth)) + 'px)'
64			}
65        };
66
67        ele.addEventListener('mousedown', mouseDownHandler);
68		ele.addEventListener('scroll', orizontalScrollHandler);
69		
70		ele.addEventListener('scroll', () => {
71			if(ele.hasAttribute("data-controller-target")) {
72				let controller = document.querySelector(".youtvrs-scroller-controller[data-controller-target=\"" + ele.getAttribute("data-controller-target") + "\"]");
73				let items = controller.querySelectorAll("li");
74				let activeIndex = Math.floor(((ele.scrollLeft + 5) / (ele.scrollWidth - ele.clientWidth)) * (items.length - 1));
75console.log(activeIndex);
76				items.forEach((e, index) => {
77					if(index == activeIndex)
78						e.classList.add("active")
79					else
80						e.classList.remove("active")
81				});
82			}
83		});
84    });
85
86const controllers = document.querySelectorAll('.youtvrs-scroller-controller');
87
88controllers.forEach((ele) => {
89	let items = ele.querySelectorAll("li");
90	items.forEach((item, index) => {
91		item.addEventListener('click', () => {
92			let scroller = document.querySelector(".youtvrs-scroller[data-controller-target=\"" + ele.getAttribute("data-controller-target") + "\"]");
93			scroller.scrollTo({
94				left: (index * (scroller.scrollWidth - scroller.clientWidth)) / (items.length - 1),
95				behavior: 'smooth'
96			});
97		});
98	});
99});