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

我正在一个项目中使用。直到最近几天，它还可以使用。我有一个需要加载多个实例的页面。在这方面，实现这一目标的文件似乎有点缺乏

我试图遵循本文中提到的代码，但似乎无法使其正常工作

我看到的行为是第一次加载滑块，但导航箭头不起作用，并将您跳回页面顶部，然而，导航点确实起作用。其他滑块都不会加载图像，但会加载导航元素

这是我的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>

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',
            });
        });
    }
});