Improvisation on the Spectrum

‹ › (function() { var container = document.currentScript.closest('.ltag-slides--carousel'); var track = container.querySelector('.ltag-slides__track'); var slides = track.querySelectorAll('.ltag-slide'); var prevBtn = container.querySelector('.ltag-slides__nav--prev'); var nextBtn = container.querySelector('.ltag-slides__nav--next'); var dotsContainer = container.querySelector('.ltag-slides__dots'); var current = 0; var total = slides.length; for (var i = 0; i < total; i++) { var dot = document.createElement('button'); dot.className = 'ltag-slides__dot' + (i === 0 ? ' ltag-slides__dot--active' : ''); dot.setAttribute('aria-label', 'Go to slide ' + (i + 1)); dot.dataset.index = i; dot.addEventListener('click', function() { goTo(parseInt(this.dataset.index)); }); dotsContainer.appendChild(dot); } function goTo(index) { current = ((index % total) + total) % total; track.style.transform = 'translateX(-' + (current * 100) + '%)'; var dots = dotsContainer.querySelectorAll('.ltag-slides__dot'); for (var i = 0; i < dots.length; i++) { dots[i].classList.toggle('ltag-slides__dot--active', i === current); } } prevBtn.addEventListener('click', function() { goTo(current - 1); }); nextBtn.addEventListener('click', function() { goTo(current + 1); }); })();