Как отобразить заголовок изображения с изображением в слайдере

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>
}