document.addEventListener('DOMContentLoaded', function() { document.querySelectorAll('.grid-uniform').forEach(function(grid) { if (grid.dataset.arrowsAdded) return; grid.dataset.arrowsAdded = 'true'; var nav = document.createElement('div'); nav.className = 'icy-carousel-nav'; nav.innerHTML = '' + '' + ''; grid.parentNode.insertBefore(nav, grid.nextSibling); var btns = nav.querySelectorAll('button'); var thumb = nav.querySelector('.icy-carousel-thumb'); function updateThumb() { var ratio = Math.max(grid.clientWidth / grid.scrollWidth, 0.1); var maxScroll = grid.scrollWidth - grid.clientWidth || 1; var scrollRatio = grid.scrollLeft / maxScroll; thumb.style.width = (ratio * 100) + '%'; thumb.style.left = (scrollRatio * (100 - ratio * 100)) + '%'; } updateThumb(); grid.addEventListener('scroll', updateThumb); btns[0].addEventListener('click', function() { grid.scrollBy({left: -260, behavior: 'smooth'}); }); btns[1].addEventListener('click', function() { grid.scrollBy({left: 260, behavior: 'smooth'}); }); }); });