如何在Lightbox模态框中嵌入jQuery lightSlider及滑块异常解决

我在使用jQuery lightSlider做图片滑块时，把它嵌入Lightbox模态框里，结果遇到个问题——第一张图片对应的滑块能正常运行，第二张及以后的完全没反应。

我的简化HTML代码 #

<div class="modal fade" tabindex="-1" id="kt_modal_1{{ $example->id }}">
    <div class="modal-dialog modal-dialog-centered  modal-xl mw-70%">
        <div class="modal-content">
            <div class="container">
                <div class="row">
                    <div class="col-md-3 col-sm-4 p-5">
                        <a href="{{ $example }}" data-lightbox="photos"> 
                          <img class="img-fluid photo-gallery rounded mw-250px bg-image hover-zoom" src="{{ $example }}">
                        </a>
                    </div>
                </div>
            </div>
        </div>
   </div>
</div> 

用到的CDN资源 #

Lightbox相关 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/js/lightbox.min.js"></script> 

lightSlider相关 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/css/lightslider.css" integrity="sha512-+1GzNJIJQ0SwHimHEEDQ0jbyQuglxEdmQmKsu8KI7QkMPAnyDrL9TAnVyLPEttcTxlnLVzaQgxv2FpLCLtli0A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

问题原因 #

1. 所有模态框的lightbox共用了data-lightbox="photos"分组，导致JS逻辑冲突，后续滑块无法正常初始化
2. lightSlider初始化时机错误——页面加载时仅第一个模态框的DOM可见，后续模态框的元素未被初始化
3. 缺少lightSlider的核心JS文件，现有CDN仅引入了样式文件

修复方案 #

1. 给每个lightbox设置唯一分组 #

把data-lightbox="photos"修改为data-lightbox="photos-{{ $example->id }}"，确保每个模态框的lightbox独立无干扰。

2. 补充lightSlider的JS文件 #

在现有CDN中添加：

<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/js/lightslider.min.js"></script>

3. 模态框显示后再初始化滑块 #

监听模态框的shown.bs.modal事件，等模态框完全显示后再初始化内部滑块，避免DOM未加载完成的问题。

修改后的完整代码 #

HTML部分

<div class="modal fade" tabindex="-1" id="kt_modal_1{{ $example->id }}">
    <div class="modal-dialog modal-dialog-centered  modal-xl mw-70%">
        <div class="modal-content">
            <div class="container">
                <div class="row">
                    <div class="col-md-3 col-sm-4 p-5">
                        <!-- 唯一lightbox分组 -->
                        <a href="{{ $example }}" data-lightbox="photos-{{ $example->id }}"> 
                          <img class="img-fluid photo-gallery rounded mw-250px bg-image hover-zoom" src="{{ $example }}">
                        </a>
                        <!-- 滑块容器，添加唯一标识 -->
                        <ul class="slider-container" id="slider-{{ $example->id }}">
                            <li><img src="{{ $example }}" /></li>
                            <li><img src="{{ $anotherExample }}" /></li>
                            <!-- 其他图片项 -->
                        </ul>
                    </div>
                </div>
            </div>
        </div>
   </div>
</div> 

JavaScript部分

// 监听所有模态框的显示完成事件
$('.modal').on('shown.bs.modal', function() {
    // 获取当前模态框内的滑块容器
    var slider = $(this).find('.slider-container');
    // 避免重复初始化
    if (!slider.hasClass('initialized')) {
        slider.lightSlider({
            // 根据需求配置参数，示例配置：
            item: 1,
            loop: true,
            pager: true,
            auto: false
        }).addClass('initialized');
    }
});

内容的提问来源于stack exchange，提问作者Babur Shah Sayer