Tworzę stronę internetową za pomocą ACF Pro. Mam karty na stronie, są one wyświetlane w pętli w sliderze. W każdym opakowaniu każdego slajdu mam atrybuty, zdaje się, że nazywają się one np.: data-img-src. Tutaj podaję link do zdjęcia. A kiedy klikniesz na kartę, informacje zostaną przeniesione do niezbędnych elementów, takich jak ten: let case1 = jQuery(this).data("img-src-1"); I druga część: W stopce mam wyskakujące okienko, składające się z dwóch suwaków. Muszę przekazać informacje z tych atrybutów do wyskakujących elementów div. Muszę tam wyświetlić liczbę slajdów, które dodałem poprzez panel administracyjny. Każda karta jest powiązana z określoną liczbą slajdów w wyskakującym okienku. Potrzebuję programu, aby dodać liczbę slajdów do wyskakującego okienka, które znajdują się w panelu administracyjnym i odpowiadających im obrazów po kliknięciu na kartę. Wyjaśnienie wszystkiego zajmie dużo czasu, w skrócie będzie to po prostu pokazanie mojego kodu, oto on:

strona.php

<div class="container p-relative">
         
<?php if( have_rows('dobavit_kartochku') ): ?>
         
<div class="objects-slider">
<?php while ( have_rows('dobavit_kartochku') ) : the_row(); ?> 
    
    <div class="slider-item"
     
        <?php if( have_rows('dobavit_izobrazhenie') ): ?>
            <?php $number2 = 1; ?>
          <?php while ( have_rows( 'dobavit_izobrazhenie') ) : the_row(); ?>
        <?php $izobrazhenie = get_sub_field('izobrazhenie'); ?>
    data-img-src-<?php echo $number2; ?>="<?php echo esc_url($output = isset($izobrazhenie['url']) ? $izobrazhenie['url'] : ''); ?>" 
    <?php $number2++; ?>
    <?php endwhile; ?>
    <?php endif; ?>
    
     
    </div>
        
    <?php endwhile; ?>
    </div>
    <?php  endif;  ?>
    </div>

<script type="text/javascript">

jQuery(".slider-item").click(function() {

let case1 = jQuery(this).data("img-src-1");
let case2 = jQuery(this).data("img-src-2");
let case3 = jQuery(this).data("img-src-3");


if(case1) {
 jQuery(".img-1").attr('src', case1);
} else {
 jQuery(".img-1").attr('src', '');
}

if(case2) {
 jQuery(".img-2").attr('src', case2);
} else {
 jQuery(".img-2").attr('src', '');
}

if(case3) {
 jQuery(".img-3").attr('src', case3);
} else {
 jQuery(".img-3").attr('src', '');
}

});

</script>

Wyskakujące okienko w stopce.php

    <div class="modal-with-slider">
  <div class="modal-with-slider__inner">
    <div class="modal-with-slider__close">&times;</div>
    <div class="modal-with-slider__content">

  <div class="modal-with-slider__wrapper">
    <div class="solo-popup-slider">
    <div class="solo-popup-slider__item">
      <img class="img-1" src="">
    </div>
    <div class="solo-popup-slider__item">
      <img class="img-2" src="">
    </div>
    <div class="solo-popup-slider__item">
      <img class="img-3" src="">
    </div>
</div>
 

  <div class="popup-slider-thumbnails">
    <div class="popup-slider-thumbnails__item">
      <img class="img-1" src="">
    </div> 
    <div class="popup-slider-thumbnails__item">
      <img class="img-2" src="">
    </div> 
    <div class="popup-slider-thumbnails__item">
      <img class="img-3" src="">
    </div>  
 
</div>      
</div>
</div>
</div>
</div>