Я создал карусель из списка в SP2013 (поле изображения, поле заголовка и поле описания). Нужно название и описание, чтобы показать по умолчанию

Question

Элементы тянутся правильно, и карусель работает нормально. Что мне нужно сделать, так это то, что по умолчанию отображаются заголовок и описание из первого элемента. Прямо сейчас изображения показывают, но окно описания пусто;они отображаются только при нажатии на изображение, что я и хочу сделать, но как только страница загружается, мне нужен заголовок и описание, показывающее.

var buildCarousel = function (items) {
  $.each(items,function(i,item){
                var cInnerHtml="";
                if(i=0){
                    $("#carouselNav").append('<div class="carousel-cell></div>');
                    cInnerHtml+='<div class="carousel-cell  is-nav-selected">'; 

                }else{                  
                    $("#carouselNav").append('<div class="carousel-cell></div>');
                    cInnerHtml+='<div class="carousel-cell ">';               
                }
                cInnerHtml+='<img src="'+item.Image.Url+'" alt="'+item.Title+'" style="width:100%;">';
                cInnerHtml+='<div class="carousel-caption" style="display:none;"><h2>'+item.Title+'</h2><p>'+item.Description+'</p></div></div>';
                $("#carouselNav").append(cInnerHtml); 
                 $("#flickityCarousel").append(cInnerHtml);                
            });
                  $("#carouselNav img").click(function(){
                $(".carouselCaption").html($(this).next().html());
            });
};

//ajax call
var url1 = "/FunZone/_api/web/lists/GetByTitle('funZone')/items?$orderby=Created asc";
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);

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

    });

};

handle_ajax(url1);

<div id="flickityCarousel" class="carousel carousel-main" data-flickity="{&quot;pageDots&quot;: false, &quot;wrapAround&quot;: true, &quot;prevNextButtons&quot;: false}">
                            <!--Code injected here-->
                        </div>
                    </section>
                    <div id="carouselNav" class="carousel carousel-nav" data-flickity="{ &quot;asNavFor&quot;: &quot;.carousel-main&quot;, &quot;contain&quot;: true, &quot;pageDots&quot;: false,&quot;prevNextButtons&quot;: false }">
                        <!--Code injected here-->
                    </div>
                    <section id="captionContainer" class="carouselCaption mb-1">
                        <!--Code injectedhere-->
                    </section>
                </div>

Answer 1

Это работает

var buildCarousel = function (items) {
          var initialTitle = items[0].Title;
          var initialDescription = items[0].Description;
          var initialText ='<h2>'+ initialTitle+'</h2><p>'+ initialDescription+'</p>';
                 $(".carouselCaption").append(initialText);
  $.each(items,function(i,item){
                var cInnerHtml="";

                if(i=0){
                    $("#carouselNav").append('<div class="carousel-cell></div>');
                    cInnerHtml+='<div class="carousel-cell  is-nav-selected">'; 

                }else{                  
                    $("#carouselNav").append('<div class="carousel-cell></div>');
                    cInnerHtml+='<div class="carousel-cell ">';               
                }
                cInnerHtml+='<img src="'+item.Image.Url+'" alt="'+item.Title+'" style="width:100%;">';
                cInnerHtml+='<div class="carousel-caption" style="display:none;"><h2>'+item.Title+'</h2><p>'+item.Description+'</p></div></div>';
                $("#carouselNav").append(cInnerHtml); 
                 $("#flickityCarousel").append(cInnerHtml);                
            });
                  $("#carouselNav img").click(function(){
                $(".carouselCaption").html($(this).next().html());
            });
};

//ajax call
var url1 = "/FunZone/_api/web/lists/GetByTitle('funZone')/items?$orderby=Created asc";
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);

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

    });

};

handle_ajax(url1);