Image slideshow counter

Kirby 3 Solved ✅
1

Hello,

I have an image slideshow with multiple images and captions.
Before each image caption, I’m trying to display a counter: the image number and the total number of images, something like: 1/3; 2/3; 3/3. Below is the code I’m using.

The problem is that it is returning all the counts in the all image captions – “1/3 2/3 3/3”, and not only one per image – “1/3”.

Would be thankful for any advice!

<div class="slideshow">  
    <?php foreach($page->images() as $image): ?>
      <ul>
        <li>
          <figure>
            <img src="<?= $image->url() ?>" alt=""></a>
          </figure>
          
          <figcaption>

         	<?php
         	 $count =1;
         	 foreach($page->images() as $image) {
        	 	 echo $count . "/" . $page->images()->count();$count++;}
          	?>
          
          	<?= $image->caption() ?>

	</figcaption>
        </li>
      </ul>
    <?php endforeach ?>
  </div>
2

You have used a duplicate foreach loop and the HTML markup doesn’t make sense, either:

<div class="slideshow"> 
  <ul>
    <?php 
    $images = $page->images();
    $total = $images->count();
    foreach($images as $image): ?>

    <li>
      <figure>
        <img src="<?= $image->url() ?>" alt=""></a>
      </figure>
      <figcaption>
        <?= $images->indexOf($image) + 1 . "/" . $total;?>
       	<?= $image->caption() ?>
      </figcaption>
    </li>

    <?php endforeach ?>
 </ul>
</div>
3

Is this a javascript powered slideshow? Some of them have a built in counter, so you may not need the PHP at all. Might be worth checking the documentation for the script you are using.

4

hi!
thank you for your help.
works perfectly!

5

hi!
no, i’m only using javascript to show (block / hide) each item list at a time, but thank you for the suggestion!