javascript - 如何使用此 foreach 通过 id 调用图像

Question

我目前正在尝试创建图像轮播，我想在轮播下添加类似的内容

当您单击滑块时，滑块下方的圆圈会将您带到下一张或上一张图片所以我有一个 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);
  }
});

我正在考虑添加一个 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>

标签： javascriptphpjquerywordpress