document.addEventListener("DOMContentLoaded", function(event) { const horizons = document.querySelectorAll('.horizontale > div'); let isDown = false; let startX; let scrollLeft; const leftArrow = document.querySelectorAll('.leftarrow'); const rightArrow = document.querySelectorAll('.rightarrow'); horizons.forEach( (horizon, i) => { let scrollAmount; if (horizon.querySelector('.elementor-posts-container')){ let scrollPostContainerWidth = horizon.querySelector('.elementor-widget-container').offsetWidth; let scrollPostsAmount = horizon.querySelectorAll('article').length; let scrollPostWidth = scrollPostContainerWidth / scrollPostsAmount; scrollAmount = scrollPostWidth; } else { scrollAmount = horizon.offsetWidth; /* Change this to 300 to scroll by 300 pixels on each arrow click, for example. As set, it scrolls the width of the elements shown */ window.addEventListener('resize',function(){ scrollAmount = horizon.offsetWidth; /* idem , needs to be same value as above */ }); } let smoothFunction = function(){horizon.setAttribute('style','scroll-behavior:smooth;')}; let clearBehavior = function(){setTimeout (function(){horizon.removeAttribute('style');},771)}; if(leftArrow[i]){ leftArrow[i].setAttribute('tabindex','0'); rightArrow[i].setAttribute('tabindex','0'); leftArrow[i].onclick = function () { smoothFunction(); horizon.scrollLeft -= scrollAmount; clearBehavior(); }; rightArrow[i].onclick = function () { smoothFunction(); horizon.scrollLeft += scrollAmount; clearBehavior(); }; } const links = horizon.querySelectorAll('div > div > div'); horizon.addEventListener('mousedown', (e) => { isDown = true; horizon.classList.add('active'); startX = e.pageX - horizon.offsetLeft; scrollLeft = horizon.scrollLeft; }); horizon.addEventListener('mouseleave', () => { isDown = false; horizon.classList.remove('active'); for (var i = 0; i { isDown = false; horizon.classList.remove('active'); for (var i = 0; i { if(!isDown) return; e.preventDefault(); const x = e.pageX - horizon.offsetLeft; const walk = (x - startX) * 1.6 ; horizon.scrollLeft = scrollLeft - walk; for (var i = 0; i < links.length; i++) { links[i].classList.add('noclick'); } }); }); });