Add pagination dots to talk carousel

Make it clear at a glance that a meetup has multiple talks, addressing
review feedback that the carousel did not signal there were several.
Dots are generated in JS (one per talk, shown only when total > 1),
sync with the counter and the active slide, and are clickable to jump
to a talk.

Author: paulacianelli

_sass/view.scss

@@ -745,6 +745,40 @@ $vm-pad-x: 4rem;
     right: 8px;
   }
 
+  .carousel__dots {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    justify-content: center;
+    margin-top: 1.125rem;
+  }
+
+  .carousel__dot {
+    background: rgba($vm-blue, 0.28);
+    border: 0;
+    border-radius: 999px;
+    cursor: pointer;
+    height: 8px;
+    padding: 0;
+    transition: background 0.2s ease, width 0.2s ease;
+    width: 8px;
+
+    &:hover {
+      background: rgba($vm-blue, 0.55);
+    }
+
+    &.is-active {
+      background: $vm-blue;
+      width: 26px;
+    }
+
+    &:focus-visible {
+      outline: 2px solid $vm-blue;
+      outline-offset: 2px;
+    }
+  }
+
   @media (max-width: 640px) {
     .carousel__btn--prev {
       left: 4px;

assets/js/meetup_carousel.js

@@ -18,8 +18,38 @@
 
     var total = slides.length;
     var current = 0;
+    var dots = [];
 
-    function updateCounter() {
+    function scrollToIndex(index) {
+      var target = slides[index];
+      if (!target) return;
+      target.scrollIntoView({ inline: 'start', behavior: 'smooth', block: 'nearest' });
+    }
+
+    // Build pagination dots so it is obvious at a glance that there are multiple talks.
+    if (total > 1) {
+      var dotsNav = document.createElement('div');
+      dotsNav.className = 'carousel__dots';
+      dotsNav.setAttribute('role', 'tablist');
+      dotsNav.setAttribute('aria-label', 'Charlas de la meetup');
+      for (var i = 0; i < total; i++) {
+        (function (index) {
+          var dot = document.createElement('button');
+          dot.type = 'button';
+          dot.className = 'carousel__dot';
+          dot.setAttribute('role', 'tab');
+          dot.setAttribute('aria-label', 'Ir a la charla ' + (index + 1) + ' de ' + total);
+          dot.addEventListener('click', function () {
+            scrollToIndex(index);
+          });
+          dotsNav.appendChild(dot);
+          dots.push(dot);
+        })(i);
+      }
+      root.appendChild(dotsNav);
+    }
+
+    function updateUI() {
       if (counter) {
         counter.textContent = pad2(current + 1) + ' / ' + pad2(total);
       }
@@ -29,12 +59,15 @@
       if (nextBtn) {
         nextBtn.disabled = current === total - 1;
       }
-    }
-
-    function scrollToIndex(index) {
-      var target = slides[index];
-      if (!target) return;
-      target.scrollIntoView({ inline: 'start', behavior: 'smooth', block: 'nearest' });
+      dots.forEach(function (dot, index) {
+        var active = index === current;
+        dot.classList.toggle('is-active', active);
+        if (active) {
+          dot.setAttribute('aria-current', 'true');
+        } else {
+          dot.removeAttribute('aria-current');
+        }
+      });
     }
 
     if (prevBtn) {
@@ -57,7 +90,7 @@
               var idx = Array.prototype.indexOf.call(slides, entry.target);
               if (idx !== -1 && idx !== current) {
                 current = idx;
-                updateCounter();
+                updateUI();
               }
             }
           });
@@ -69,7 +102,7 @@
       });
     }
 
-    updateCounter();
+    updateUI();
   }
 
   function init() {