あなたのキモチ つなげるカタチ

TOP > jQuery > 【jQuery】複数のjsonファイルを読み込み、各ファイルの1つ目に記述したデータからスライダーを作成するテクニック

【jQuery】複数のjsonファイルを読み込み、各ファイルの1つ目に記述したデータからスライダーを作成するテクニック

スポンサーリンク

コーディングテクニックの実装内容

複数のjsonファイルを読み込み、各ファイルの1つ目に記述したデータからスライダーを作成する方法です。 全てのjsonファイルが同じ項目で記述されている必要がありますが、直接jsonファイルを編集できない状況で役に立つと思われます。

実装所要時間:20分程度
難易度:初心者コーダーでも実装可能

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(){
  var mySwiper1 = new Swiper('.swiper1', {
  paginationClickable: true,
  slidesPerView: 3,
  loop: true,
  speed: 1000,
  spaceBetween: 20
  })
},100);

});

実装のポイント

現在制作中

スポンサーリンク