Jquery 单击时在模态中显示来自img滑块的img

我有一个图像滑块，我希望用户能够点击当前显示的img，然后在模式中看到它。困难在于图像是层叠在一起的。因此，我目前的方法是将单击的任何img放入模式中，最上面的img是唯一可以在模式中显示的img

当用户单击滑块时，是否有方法显示（在模式中）滑块中当前显示的图像？你可以在这里看到我目前的进展。以下是我当前用于在模式中显示单击的img的jquery：

  $(window).load(function() {
            $('img').on('click', function() {
                var sr = $(this).attr('src');
                $('#mimg').attr('src', sr);
                $('#myModal').modal('show');
            });
        });

提前感谢您的帮助

看起来您没有选择当前幻灯片的图像。我通过循环浏览幻灯片并检查其不透明度找到了当前幻灯片

去掉这个 换成这个

---

您正在使用的图像滑块是否仅使用CSS创建？无JS？它将任何未查看图像的“幻灯片”容器更改为不透明度0。因此，我现在尝试的是更改

var sr=$（this.attr（'src'）获取最接近的“幻灯片”div内的img，不透明度为1。。。说起来容易做起来难！然后，您只需使用
数据属性
添加
img
触发模态，并使用事件侦听器在模态中显示相对图像，而无需单击事件。嗯，我不确定我是否遵循了（我敢打赌这是在我身上！）。这里有一个稍微整理过的示例，显示了我正在使用jquery尝试的内容。非常感谢！我还有一个问题。是否可以只检查离单击事件最近的幻灯片？我这样问是因为我在一个页面上使用了几个这样的滑块。我正在试图找出如何调整代码。我更新了代码，以便代码搜索距离单击事件最近的
。幻灯片
。谢谢！这太完美了！
var sr = $(this).attr('src');

var sr;
$(this).closest('.slides').find('.slide-container').each(function(index) {
    if ($(this).find('.slide').css("opacity") === 1) {
        sr = $(this).find('img').attr('src');
    }
});