Javascript 我需要为旋转木马创建标题，这样每当我单击图像时，属于该图像的标题就会显示出来

我正在使用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 buildmain carousel=功能（项目）{
var flickitySlider=$（“#flickityCarousel”）；
var转盘内容；
对于（变量i=0；i”；
captionContainer.prepend（标题）；
}
};
//ajax调用
var url1=“/FunZone/_-api/web/lists/GetByTitle（'FunZone'）/items”；
var handle\u ajax=函数（url）{
$.ajax({
url:url，
方法：“获取”，
标题：{
接受：“application/json；odata=verbose”
},
成功：功能（数据）{
var项目=数据和结果；
控制台日志（项目）；
建筑主转盘（项目）；
建筑旋转木马（项目）；
建筑物说明（项目）；
},
错误：函数（数据）{
console.log（“错误：+数据”）；
}
});
};
handle_ajax（url1）；

所以。。。这段代码的哪一部分不起作用？buildCaptions函数它怎么不起作用？它所做的一切就是预先添加标题，看起来它已经成功完成了。正如我上面解释的，我只需要添加属于显示图像的标题。如果没有有效的演示，将很难进行诊断。也许可以虚拟ajax负载并提供一个。

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);