diff --git a/package.json b/package.json
index ea9aa0f4..ca855d1a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "impro",
-  "version": "0.16.3",
+  "version": "0.16.4",
   "type": "module",
   "scripts": {
     "start": "rm -rf build && NODE_ENV=development eleventy --serve",
diff --git a/src/js/components/image-carousel.js b/src/js/components/image-carousel.js
index 2d813185..d67e5eeb 100644
--- a/src/js/components/image-carousel.js
+++ b/src/js/components/image-carousel.js
@@ -104,6 +104,14 @@ export class ImageCarousel extends Component {
                     loading="lazy"
                     draggable="false"
                   />
+                  ${numImages > 1
+                    ? html`<span
+                        class="carousel-counter"
+                        data-testid="carousel-counter"
+                        aria-hidden="true"
+                        >${index + 1}/${numImages}</span
+                      >`
+                    : ""}
                   ${image.alt
                     ? html`<span
                         class="alt-indicator"
@@ -123,14 +131,6 @@ export class ImageCarousel extends Component {
               `;
             })}
           </div>
-          ${numImages > 1
-            ? html`<span
-                class="carousel-counter"
-                data-testid="carousel-counter"
-                aria-hidden="true"
-                >${this.currentIndex + 1}/${numImages}</span
-              >`
-            : ""}
         </div>
       `,
       this,
diff --git a/tests/e2e/specs/concerns/postEmbeds.test.js b/tests/e2e/specs/concerns/postEmbeds.test.js
index 324e18ad..fa9199c5 100644
--- a/tests/e2e/specs/concerns/postEmbeds.test.js
+++ b/tests/e2e/specs/concerns/postEmbeds.test.js
@@ -120,9 +120,10 @@ test.describe("Post embeds view — gallery carousel", () => {
       carousel.locator('[data-testid="carousel-slide"]'),
     ).toHaveCount(5);
 
-    await expect(
-      carousel.locator('[data-testid="carousel-counter"]'),
-    ).toHaveText("1/5");
+    const counters = carousel.locator('[data-testid="carousel-counter"]');
+    await expect(counters).toHaveCount(5);
+    await expect(counters.first()).toHaveText("1/5");
+    await expect(counters.last()).toHaveText("5/5");
 
     await expect(
       carousel.locator('[data-testid="carousel-slide"][tabindex="0"]'),
@@ -149,30 +150,25 @@ test.describe("Post embeds view — gallery carousel", () => {
     ).toHaveCount(2);
   });
 
-  test("arrow-key navigation advances the active slide and counter", async ({
-    page,
-  }) => {
+  test("arrow-key navigation advances the active slide", async ({ page }) => {
     await setupSinglePostThread(page, buildGalleryPost({ count: 6 }));
 
     const carousel = page.locator('[data-testid="image-carousel"]');
     await expect(carousel).toBeVisible({ timeout: 10000 });
-    const counter = carousel.locator('[data-testid="carousel-counter"]');
+    const activeSlide = carousel.locator(
+      '[data-testid="carousel-slide"][data-teststate="active"]',
+    );
 
     await carousel.locator('[data-testid="carousel-slide"]').first().focus();
 
     await page.keyboard.press("ArrowRight");
-    await expect(counter).toHaveText("2/6");
-    await expect(
-      carousel.locator(
-        '[data-testid="carousel-slide"][data-teststate="active"]',
-      ),
-    ).toHaveAttribute("data-index", "1");
+    await expect(activeSlide).toHaveAttribute("data-index", "1");
 
     await page.keyboard.press("ArrowRight");
-    await expect(counter).toHaveText("3/6");
+    await expect(activeSlide).toHaveAttribute("data-index", "2");
 
     await page.keyboard.press("ArrowLeft");
-    await expect(counter).toHaveText("2/6");
+    await expect(activeSlide).toHaveAttribute("data-index", "1");
   });
 
   test("clicking a slide opens the lightbox at that index", async ({
diff --git a/tests/unit/specs/components/image-carousel.test.js b/tests/unit/specs/components/image-carousel.test.js
index cccc544c..e64f5595 100644
--- a/tests/unit/specs/components/image-carousel.test.js
+++ b/tests/unit/specs/components/image-carousel.test.js
@@ -66,11 +66,19 @@ t.describe("ImageCarousel rendering", (it) => {
     assertEquals(slides[0].getAttribute("aria-label"), "image 0");
   });
 
-  it("shows counter '1/N' when multiple images", () => {
+  it("renders a per-slide counter 'i/N' on each slide when multiple images", () => {
     const el = createCarousel(makeImages(7));
-    const counter = el.querySelector('[data-testid="carousel-counter"]');
-    assert(counter !== null);
-    assertEquals(counter.textContent, "1/7");
+    const counters = el.querySelectorAll('[data-testid="carousel-counter"]');
+    assertEquals(counters.length, 7);
+    assertEquals(counters[0].textContent, "1/7");
+    assertEquals(counters[3].textContent, "4/7");
+    assertEquals(counters[6].textContent, "7/7");
+  });
+
+  it("omits per-slide counters when there is only one image", () => {
+    const el = createCarousel(makeImages(1));
+    const counters = el.querySelectorAll('[data-testid="carousel-counter"]');
+    assertEquals(counters.length, 0);
   });
 
   it("renders ALT badge only when alt text present", () => {
@@ -120,7 +128,7 @@ t.describe("ImageCarousel rendering", (it) => {
 });
 
 t.describe("ImageCarousel interaction", (it) => {
-  it("updates active slide + counter on arrow key", () => {
+  it("updates active slide on arrow key", () => {
     const el = createCarousel(makeImages(4));
     const slides = el.querySelectorAll('[data-testid="carousel-slide"]');
     slides[0].focus();
@@ -132,8 +140,6 @@ t.describe("ImageCarousel interaction", (it) => {
     assertEquals(slides[1].getAttribute("tabindex"), "0");
     assertEquals(slides[0].getAttribute("data-teststate"), "inactive");
     assertEquals(slides[0].getAttribute("tabindex"), "-1");
-    const counter = el.querySelector('[data-testid="carousel-counter"]');
-    assertEquals(counter.textContent, "2/4");
   });
 
   it("clamps arrow key navigation at boundaries", () => {