尝试实现多个实例时仅加载一个滑块实例

如何解决尝试实现多个实例时仅加载一个滑块实例

我在项目中使用Tiny Slider。直到最后两天都可以使用。我有一个页面，需要多个实例来加载。在这方面似乎缺少实现此目的的文档。

我尝试遵循此issue中提到的代码，但似乎无法正常工作。

我看到的行为是第一个滑块加载，但是导航箭头不起作用，使您跳回到页面顶部，但是导航点起作用了。其他滑块均不会加载图像，但会加载导航元素。

这是我的HTML：

<div class="card">
    <div class="card-header"
         id="accordion_<?PHP echo $installer['InstallerID']; ?>_2">
        <h2 class="mb-0">
            <button class="btn btn-link collapsed" type="button"
                    data-toggle="collapse"
                    data-target="#collapse_<?PHP echo $installer['InstallerID']; ?>_2"
                    aria-expanded="false"
                    aria-controls="collapse_<?PHP echo $installer['InstallerID']; ?>_2">
                gallery
                <i class="fas fa-fw fa-plus"></i>
                <i class="fas fa-fw fa-minus"></i>
            </button>
        </h2>
    </div>
    <div id="collapse_<?PHP echo $installer['InstallerID']; ?>_2"
         class="collapse"
         aria-labelledby="accordion_<?PHP echo $installer['InstallerID']; ?>_2"
         data-parent="#accordion_<?PHP echo $installer['InstallerID']; ?>">
        <div class="card-body">

            <div class="slider-wrapper">

                <div class="slider installer-slider" data-name="<?PHP echo $installer['InstallerID']; ?>">

                    <?PHP foreach ($installer['gallery'] as $gallery_image) : ?>
                    <div>
                        <img src="<?PHP echo $gallery_image['Full']; ?>"
                             alt=""
                             class="d-block w-100 img-fluid">
                    </div>
                    <?PHP endforeach; ?>

                </div>

                <div class="slider-nav installer-slider-nav">
                    <a href="#"
                       class="btn btn-square bg-light-grey text-white hover:bg-dark-blue slider-prev">
                        <i class="fas fa-chevron-left"></i>
                    </a>
                    <a href="#"
                       class="btn btn-square bg-light-grey text-white hover:bg-dark-blue slider-next">
                        <i class="fas fa-chevron-right"></i>
                    </a>
                </div>

            </div>

        </div>
    </div>
</div>

这是我的JavaScript：

var forEach = function (array,callback,scope) {
    for (var i = 0; i < array.length; i++) {
        callback.call(scope,i,array[i]); // passes back stuff we need
    }
};

if (jQuery('.installer-slider').length) {
    // tiny-slider initialisation
    var sliders = document.querySelectorAll('.slider');
}

jQuery('.card').on('show.bs.collapse',function () {
    jQuery(this).addClass('open');
    if (sliders) {
        forEach(sliders,function (index,value) {
            let installerSlider = tns({
                container: value,autoWidth: false,autoHeight: true,items: 1,loop: true,mouseDrag: true,touch: true,lazyLoad: true,// slideBy: 1,nav: true,controlsContainer: '.installer-slider-nav',});
        });
    }
});

我知道我做错了什么，但看不到是什么。谁能对此有所启示？