PostCounter

script.js

@@ -309,6 +309,7 @@ document.addEventListener('DOMContentLoaded', () => {
         }
 
         const paginationHTML = media.length > 1 ? `<div class="carousel-dots">${dotsHTML}</div>` : '';
+        const counterHTML = media.length > 1 ? `<div class="media-counter">1/${media.length}</div>` : '';
 
         article.innerHTML = `
             <div class="post-header">
@@ -319,9 +320,10 @@ document.addEventListener('DOMContentLoaded', () => {
                 ${optionsHTML}
             </div>
             <div class="post-image-wrapper post-media-wrapper">
-                <div class="media-carousel" onscroll="updateDots(this)">
+                <div class="media-carousel" onscroll="updateCarouselState(this)">
                     ${slidesHTML}
                 </div>
+                ${counterHTML}
                 ${paginationHTML}
             </div>
             <div class="post-actions">
@@ -381,14 +383,22 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     }
 
-    // Global helper for dots
-    window.updateDots = function (carousel) {
+    // Global helper for dots and counter
+    window.updateCarouselState = function (carousel) {
         const index = Math.round(carousel.scrollLeft / carousel.offsetWidth);
+
+        // Update Dots
         const dots = carousel.parentElement.querySelectorAll('.dot');
         dots.forEach((dot, i) => {
             if (i === index) dot.classList.add('active');
             else dot.classList.remove('active');
         });
+
+        // Update Counter
+        const counter = carousel.parentElement.querySelector('.media-counter');
+        if (counter) {
+            counter.innerText = `${index + 1}/${dots.length}`;
+        }
     }
 
     // --- FEED LISTENERS ---
@@ -594,7 +604,7 @@ document.addEventListener('DOMContentLoaded', () => {
                     wrapper.appendChild(dotsContainer);
 
                     // Attach Listeners
-                    mediaPreviewContainer.onscroll = () => window.updateDots(mediaPreviewContainer);
+                    mediaPreviewContainer.onscroll = () => window.updateCarouselState(mediaPreviewContainer);
                     enableDragScroll(mediaPreviewContainer); // Desktop Swipe Support
                 }
             }

styles/main.css

@@ -870,3 +870,20 @@ p {
     scroll-snap-type: x mandatory;
 }
 
+
+/* --- MEDIA COUNTER BADGE --- */
+.media-counter {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    background: rgba(0, 0, 0, 0.6);
+    color: #fff;
+    font-size: 12px;
+    padding: 4px 8px;
+    border-radius: 12px;
+    pointer-events: none;
+    z-index: 10;
+    font-weight: 500;
+    backdrop-filter: blur(4px);
+}
+