Мне нужно создать подписи для карусели, поэтому всякий раз, когда я нажимаю на изображение, появляются подписи, принадлежащие этому изображению

Question

Я использую карусель flickity и размещаю контент в Sharepoint2013. Я создал столбцы изображений, столбец заголовка и столбец описания. Изображения растягиваются правильно, а подписи карусели - нет. Происходит то, что я перебираю все элементы, а заголовок и описание извлекаются одновременно, и я намерен показать, что он показывает только заголовок и описание для выбранного изображения. Карусель имеет две секции, одна из которых является основной каруселью, а другая - каруселью для большого пальца

<div id="flickityCarousel" class="carousel carousel-main">
 <div class="flickity-viewport" style="height: 300px; touch-action: pan-y;">
  <div class="flickity-slider" style="left: 0px; transform: translateX(35.98%);">
   <div class="carousel-cell is-selected" style="position: absolute; left: 57.01%;">
     <img src="/FunZone/PublishingImages/PurchasingRiskLunch.jpeg" alt="">
    </div>
   </div>
 </div>
</div>
<div class="flickity-viewport" style="height: 100px; touch-action: pan-y;">
 <div class="flickity-slider" style="left: 0px; transform: translateX(40.77%);">
  <div class="carousel-cell is-selected is-nav-selected" style="position: absolute; left: 0%;">
   <img src=" /FunZone/PublishingImages/Port%20everglades.jpg" alt="">
  </div>
 </div>
</div>
<section id="captionContainer" class="carouselCaption mb-1">
<h2>Port Everglades Wear Red in Support of AIDS Awareness Month</h2>
<p>​Purchasing and Risk Management Divisions sharing camaraderie at an impromptu lunch - relaxing and restoring.</p>
</section>

var buildMainCarousel = function (items) {
    var flickitySlider = $('#flickityCarousel');
    var carouselContent;

    for (var i = 0; i < items.length; i++) {
        carouselContent = '<div class="carousel-cell">' +
            '<img src=" ' + items[i].Image.Url.replace("http://bc-net", "") + alt="">' + '</div>';
        console.log(carouselContent);
        flickitySlider.append(carouselContent);
    }

};

var buildCarouselNav = function (items) {
    var carouselNavContainer = $('#carouselNav');

    for (let i = 0; i < items.length; i++) {
        var carouselNav = '<div class="carousel-cell">' +
            '<img src=" ' + items[i].Image.Url.replace("http://bc-net", "") + alt="">' + '</div>';
        carouselNavContainer.prepend(carouselNav);
    }

};

var buildCaptions = function (items) {
    var captionContainer = $('#captionContainer');

    for (let i = 0; i < items.length; i++) {
        var captions = '<h2>' + items[i].Title + '</h2>' +
            '<p>' + items[i].Description + '</p>';
        captionContainer.prepend(captions);
    }

};

//ajax call
var url1 = "/FunZone/_api/web/lists/GetByTitle('funZone')/items";
var handle_ajax = function (url) {
    $.ajax({
        url: url,
        method: "GET",
        headers: {
            Accept: "application/json; odata=verbose"
        },
        success: function (data) {
            var items = data.d.results;
            console.log(items);

            buildMainCarousel(items);
            buildCarouselNav(items);
            buildCaptions(items);


        },
        error: function (data) {
            console.log("Error: " + data);
        }

    });

};

handle_ajax(url1);