如何使用Bootstrap获取滑块中活动图像的ID

Question

当我单击滑块的图像时，我想显示带有图像的模态。

对于一张图像，JavaScript代码可以正常工作，但是在滑块中，我需要获取活动图像的id才能显示它。我怎样才能做到这一点？预先谢谢你。

HTML：

<div class="carousel-inner">
    <!-- Item 1 -->
    <div class="item  active ">
        <img src="{{asset($offer->firstimages)}}"
             class="properties slider-dimensions" height="500px"
             alt="properties"/>
    </div>
    @foreach($images as $key => $image)
        <div class="item">
            //the image
            <img src="{{asset($image)}}"
                 class="properties slider-dimensions" id="img{{$key}}" height="500px"
                 alt="properties"/>
        </div>
    @endforeach
<!-- # Item 4 -->
</div>

JavaScript：

var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById(imgId); //id image variable
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function() {
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}