Javascript 如何使用此foreach按id调用图像

我目前正在尝试创建一个图像旋转木马，我想在旋转木马下添加类似的内容

单击滑块时，滑块下方的圆圈将带您进入下一张或上一张图片 所以我有一个jQuery代码，它已经通过侧边的按钮将我的图片移动到下一个和上一个，但是我不能关联它，这样它就可以移动按钮，我想这是因为我需要首先通过它们的ID调用图像，或者仅仅是一个0，1，2取决于有多少张图片，以便我可以将其连接到jQuery并将图片添加到其中

这是我用来调用图片的PHP代码

<?php
                        if (!empty($data['images'])):
                            foreach ($data['images'] as $img) : ?>
                                <?php if (!empty($img['image'])) : ?>
                                    <div class="slide parentSlider">
                                        <div class="slider-inner pop parentSlider-cell">
                                            <?php echo wp_get_attachment_image($img['image'], 'carousel-image', '', ['class' => 'img-responsive', 'data-track-content' => '']); ?>
                                        </div>
                                    </div>
                                <?php endif; ?>
                            <?php endforeach;
                        endif;
                        ?>

然后我在模态上调用图片并使用jQuery代码

var id;
$('.pop').on('click', function() {
  var idx = $(this).parent().index();
  id = parseInt(idx);
  $('.imagepreview').attr('src', $(this).find('img').attr('src'));
  $('#imagemodal').modal('show');
  $(".carousel-inner").carousel(id); // slide carousel to selected
});

$('.next').on('click', function() {
  id++; //increment
  if (id < $('.imgs').length) {
    //get id find src
    var next_image = $('.imgs').eq(id).find('img').attr('src');
    $('.imagepreview').attr('src', next_image); //add same
    $(".carousel-inner").carousel(id);
  }
});
$('.prev').on('click', function() {
  id--; //decremnt
  if (id > -1) {
    //find image
    var next_image = $('.imgs').eq(id).find('img').attr('src');
    $('.imagepreview').attr('src', next_image); //add same
    $(".carousel-inner").carousel(id);
  }
});

var-id；
$（'.pop'）。在（'click'，function（）上{
var idx=$（this.parent（）.index（）；
id=parseInt（idx）；
$（'.imagepreview'）.attr（'src'，$（this.find（'img'）.attr（'src'））；
$（'#imagemodal'）.modal（'show'）；
$（“.carousel-inner”）.carousel（id）；//将旋转木马滑动到选定位置
});
$（'.next'）。在（'click'，function（）上{
id++；//增量
如果（id<$（'.imgs'）。长度）{
//get id find src
var next_image=$（'.imgs'）.eq（id）.find（'img'）.attr（'src'）；
$（'.imagepreview'）.attr（'src'，next_image）；//添加相同的
$（“.carousel-inner”）.carousel（id）；
}
});
$（'.prev'）。在（'click'，function（）上{
id--；//递减
如果（id>-1）{
//查找图像
var next_image=$（'.imgs'）.eq（id）.find（'img'）.attr（'src'）；
$（'.imagepreview'）.attr（'src'，next_image）；//添加相同的
$（“.carousel-inner”）.carousel（id）；
}
});

我正在考虑添加UL和LI或DIV，这样我就可以使用相同的foreach来调用图片，但我不知道怎么做

//Example code i was thinking to use 
<div id="controls">
        <div id="control-container">
            <button id="slide1" class="control-button"></button>
            <button id="slide2" class="control-button"></button>
            <button id="slide3" class="control-button"></button>
        </div>
    </div>

//我想使用的示例代码

我不熟悉jQuery，但我确信它大多数都有一个选择器，返回匹配元素的数组，很像

document.querySelectorAll（）

您可以使用它来遍历和定位所需的元素。它确实返回一个数组，但我被告知您仍然需要配置PHP才能使用它，因为我对jQuery不太熟悉，我认为应该这样做