Javascript 从缩略图阵列链接到特定滑入式旋转木马

我在WordPress中有一个来自ACF的库字段。我想将所有图像输出为拇指（用砖石排列），然后单击图像打开旋转木马（处于模式），旋转木马跳转到相应的幻灯片

图像拇指的显示方式与我希望的相同，代码如下：

<?php $galleryImages = get_field('image_gallery'); 
if ($galleryImages): ?>

<div id="image-gallery" style="margin: auto" class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": ".grid-sizer", "gutter": 10, "fitWidth": "true" }'>
    <div class="grid-sizer"></div>
    <?php $slideNumber = 0; ?>
    <?php foreach ( $galleryImages as $image ): ?>

    <div class="grid-item">
        <a href="#carousel-modal" data-toggle="modal" data-slide-to="<?php echo $slideNumber; ?>">
            <img class="gallery" src="<?php echo $image['sizes']['medium']; ?>">
        </a>
    </div>

    <?php 
    $slideNumber++;
    endforeach; ?>

</div>

模式中的旋转木马是通过以下方式完美生成的：

<div class="modal fade" id="carousel-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="carousel" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">
                        <?php $class = 'carousel-item active'; ?>
                        <?php foreach ( $galleryImages as $carouselSlide ): ?>
                        <div class="<?php echo $class; ?>">
                            <img class="d-block w-100" src="<?php echo $carouselSlide['sizes']['large']; ?>">
                        </div>
                        <?php $class = 'carousel-item'; 
                endforeach; ?>
                    </div>

                    <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<?php endif; ?>

&时代；
我突然想到：

用
onclick=“$（'.carousel'）.carousel（）”
替换
a
上的
数据幻灯片至
属性。一切正常

以前的网站是一个侥幸。结果证明，它使用的一个插件是添加了一些脚本，使其工作
 我突然想到：

用
onclick=“$（'.carousel'）.carousel（）”
替换
a
上的
数据幻灯片至
属性。一切正常

以前的网站是一个侥幸。结果证明，它使用的一个插件是添加了一些脚本，使其工作