【jQuery】How to create a slider by reading multiple json files and acquiring only the data described in the first of each file(Demo page)

※Please check using Developer tools

Sponsored links

CSS

.swiper-container {
  opacity: 0;
}
.swiper-container.show {
  opacity: 1;
}
  

JavaScript

$(function(){
  let jsonList = function(json, target) {
    for(let i=0; i < 1; i++){
      let code = ('<a href="' + json[i].link + '"><div"><img src="' + json[i].img + '"></div><p>' + json[i].text + '</p></a>');
      let element = document.getElementById(target);
      element.insertAdjacentHTML("beforeend", code);
    }
  };

  $.ajax({
    url: '1.json',
    type: 'GET',
    dataType: 'json',
  })
  .then(
    function (json) {
      jsonList(json, 'list01');
    }
  );

  $.ajax({
    url: '2.json',
    type: 'GET',
    dataType: 'json',
  })
  .then(
    function (json) {
      jsonList(json, 'list02');
    }
  );

  $.ajax({
    url: '3.json',
    type: 'GET',
    dataType: 'json',
  })
  .then(
    function (json) {
      jsonList(json, 'list03');
    }
  );

  $.ajax({
    url: '4.json',
    type: 'GET',
    dataType: 'json',
  })
  .then(
    function (json) {
      jsonList(json, 'list04');
    }
  );

  $.ajax({
    url: '5.json',
    type: 'GET',
    dataType: 'json',
  })
  .then(
    function (json) {
      jsonList(json, 'list05');
    }
  );

  $.ajax({
    url: '6.json',
    type: 'GET',
    dataType: 'json',
  })
  .then(
    function (json) {
      jsonList(json, 'list06');
    }
  );

});

$(window).on('load', function(){
setTimeout(function(){
  $(".swiper-container").addClass("show");

  var mySwiper1 = new Swiper('.swiper1', {
  paginationClickable: true,
  slidesPerView: 3,
  loop: true,
  speed: 1000,
  spaceBetween: 20
  })
},100);

});