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