JavaScript Карусель Дополнение 3 предмета каждый - PullRequest
1 голос
/ 04 октября 2019

У меня есть список из 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)">&#10094;</a>
  <a class="nextbutton" onclick="plusSlides(1)">&#10095;</a>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...