分割そして挿入

const listArea = document.querySelector(".swiper-wrapper");
const number = 3;

getData()
  .then((list) => {
    displayList(list);
  })
  .catch((err) => {
    console.log(err);
  });

async function getData() {
  const data = await fetch(
    "https://url"
  );
  return await data.json();
}

async function displayList(list) {
  const length = Math.ceil(list.length / number);
  const processingList = new Array(length).fill().map((_, i) => {
    return list.slice(i * number, (i + 1) * number);
  });

  processingList.forEach((items) => {
    const divTag = document.createElement("div");
    divTag.className = "swiper-slide";
    const box = items
      .map((item) => {
        return `
        <section class="list__box">
          <figure class="opacityTargets" class="listImg__wrap">
            <img src="${item.image}" alt="${item.title}" class="listImg__img" />
          </figure class="opacityTargets">
          <div class="listTxt__wrap">
            <h2 class="listTxt__ttl">${item.title}</h2>
            <p class="listTxt__txt">${item.text}</p>
          </div>
        </section>
      `;
      })
      .join("");
    divTag.innerHTML += box;
    listArea.appendChild(divTag);
  });
}