如何在滑块中显示图像标题

Question

我想在图像滑块的每个图像下方显示图像标题。

但是现在我的问题是，像这样的每张图像都显示所有图像标题

查看：

  <div class="grid-11 left">
        @if (Model.Photos.Count > 0)
        {

            <div style="padding:10px">
                <div class="slide-content" style="max-width:800px">
                    @foreach (var photos in Model.Photos)
                    {
                        <div>
                            <img class="mySlides" src="@Url.Content(photos.photo_url)"/>

                        </div>
                        <span>@photos.photo_caption</span>
                    }
                    <div class="w3-center">
                        <div class="w3-section">
                            <button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ </button>
                            <button class="w3-button w3-light-grey" onclick="plusDivs(1)"> ❯</button>
                        </div>
                    </div>
                </div>
             </div>
        }
    </div>

脚本：

   var slideIndex = 1;
    showDivs(slideIndex);

    function plusDivs(n) {
        showDivs(slideIndex += n);
    }

    function currentDiv(n) {
        showDivs(slideIndex = n);
    }

    function showDivs(n) {
        var i;
        var x = document.getElementsByClassName("mySlides");
        if (n > x.length) {
            slideIndex = 1
        }
        if (n < 1) {
            slideIndex = x.length
        }
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        x[slideIndex - 1].style.display = "block";
    }

如何通过传递image_id为每个图像显示标题？

Answer 1

问题是您仅通过class="mySlides"将图像定位为显示块/无图像。您需要将图像和标题包装在某种容器中，然后将其定位。

@foreach (var photos in Model.Photos)
{
    <div class="mySlides">
        <div>
            <img src="@Url.Content(photos.photo_url)"/>
        </div>
        <span>@photos.photo_caption</span>
    </div>
}