У меня есть список из 10 предметов. Я делаю API отдыха, чтобы получить эти элементы, а затем добавляю эти элементы, чтобы поместить их в карусель. Проблема в том, что на каждом слайде показывается один элемент, и я хотел показать 3 элемента на слайде, каждый элемент отличается от последнего слайда.
Как мне этого добиться?
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", GetUserID);
} else {
GetUserID();
}
function GetKPIS() {
jQuery.ajax({
url: URL,
method: "GET",
headers: {
"Accept": "application/json; odata=verbose"
},
success: function(data) {
jQuery.each(data.d.results, function(key, value) {
var Campanha = (value.CAMPANHA);
var GRO = (value.GRO);
var posicao = parseFloat(value.Posi_x00e7__x00e3_o)
var novosclientes = (value.Novos_x002f_Actuais)
var UltimaData = day + "-" + month + "-" + year;
var UltimaDataOnly = UltimaData.substring(0, 10);
jQuery("#slideshow-container").append("<div class='mySlides fade'><div class='ColunaKPI'><a href='http://dinamizacaocomercialdev.bancobic.net/'><p style='color: #808080;font-size: 12px;'>" + Campanha + "</p><p style='color: #808080;font-size: 8px;'>" + novosclientes + "</p><p style='font-size: 40px;color: #353535;'>" + Math.round(GRO * 100) + "%</p><p style='font-size: 11px;color: #c3c3c3;'>" + UltimaDataOnly + "</p><p style='color: " + colorposicao + ";font-size: 11px;'>" + posicao + "º</p></a></div></div>");
});
showSlides();
},
error: function(error) {
console.log(error);
}
});
}
var myIndex = 0;
function showSlides() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {
myIndex = 1
}
x[myIndex - 1].style.display = "block";
setTimeout(showSlides, 3000);
}
function plusSlides(n) {
showSlides(slideIndex += n);
}
<div id="slideshow-container" class="slideshow-container">
<a class="previousbutton" onclick="plusSlides(-1)">❮</a>
<a class="nextbutton" onclick="plusSlides(1)">❯</a>
</div>