Dynamic image counter below image slider

Kirby 2 Questions 🤔
1

Hi Kirby Forum,

I’d like to have a dynamic image counter (1 of … Images), which is updated when i change a slide. I found a solution with the foreach loop, but i don’t want to have every single current image count in a seperated slide.

This is what i have

<div class="swiper-container swiper--project">
<div class="swiper-wrapper">    
  <?php foreach($page->images()->sortBy('name', 'asc', SORT_NATURAL) as $image): ?>
    <figure class="swiper-slide">
      <img src="<?php echo $image->url() ?>" alt="<?php echo $page->title()->html() ?>">
      <p class="padding-top--2rem"> 
        <?php 
        echo "Image " . ($count + 1) . " of " . $page->images()->count();
        $count++; 
        ?>
      </p>
    </figure>
  <?php endforeach ?>
</div>
</div>

How can i update the counter by clicking on a slide? Thanks guys for your help in advance. This forum is great :slight_smile:

2

All changes you want to make to a page that is already loaded have to be made via javascript (or an Ajax call, if you need to fetch information from the server).