html_for_JavaScript

<div class="swiper-container diagnosis-slide">
  <!-- swiperの大枠　横幅・高さ・座標・両橋見切れ様overflow:hiddenはこのセレクタに指定 -->
  <div class="swiper">
    <!-- このセレクタがswiperのトリガーになる -->
    <div class="swiper-wrapper">
      <!-- このセレクタにスライドさせるコンテンツの高さを設定-->

      <!-- 診断１枚目　開始 -->
      <div class="swiper-slide diagnosis-each" data-slidename="d-type-top">
        <!-- スライド内のスタイルはここに記述 -->
        <div class="swiper-slide-inner">
          <!-- 診断コンテンツ１枚目 KV画像と開始ボタンが入ることが多い -->
          <p>診断コンテンツKV</p>
          <p class="triggerNext">診断開始</p>
        </div>
      </div>
      <!-- 診断１枚目　終了 -->

      <!-- 診断２枚目　開始 -->
      <div class="swiper-slide diagnosis-each" data-slidename="d-type-1">
        <!-- スライド左右に余白を付ける場合はこのセレクタに設定 -->
        <div class="swiper-slide-inner">
          <!-- スライド内のスタイルはここに記述 -->
          <div>
            <h2>Type1</h2>
            <ul>
              <li>
                <input type="radio" name="radio" value="a" data-goto="d-type-2">診断選択肢(3枚目に分岐)
              </li>
              <li>
                <input type="radio" name="radio" value="b" data-goto="d-type-3">診断選択肢(4枚目に分岐)
              </li>
              <li>
            </ul>
          </div>
          <div class="diagnosis-transition">
            <p class="triggerBack">戻る</p>
            <p class="triggerNext">次へ</p>
          </div>
        </div>
      </div>
      <!-- 診断２枚目　終了 -->

      <!-- 診断３枚目　開始 -->
      <div class="swiper-slide diagnosis-each" data-slidename="d-type-2">
        <!-- スライド左右に余白を付ける場合はこのセレクタに設定 -->
        <div class="swiper-slide-inner">
          <!-- スライド内のスタイルはここに記述 -->
          <div>
            <h2>Type2</h2>
            <ul>
              <li>
                <input type="radio" name="radio2" value="a_1" data-goto="d-type-4">診断選択肢(5枚目に遷移)
              </li>
              <li>
                <input type="radio" name="radio2" value="a_2" data-goto="d-type-4">診断選択肢(5枚目に遷移)
              </li>
            </ul>
          </div>
          <div class="diagnosis-transition">
            <p class="triggerBack">戻る</p>
            <p class="triggerNext triggerResult">結果を見る</p>
          </div>
        </div>
      </div>
      <!-- 診断３枚目　終了 -->

      <!-- 診断4枚目　開始 -->
      <div class="swiper-slide diagnosis-each" data-slidename="d-type-3">
        <!-- スライド左右に余白を付ける場合はこのセレクタに設定 -->
        <div class="swiper-slide-inner">
          <!-- スライド内のスタイルはここに記述 -->
          <div>
            <h2>Type3</h2>
            <ul>
              <li>
                <input type="radio" name="radio3" value="b_1" data-goto="d-type-4">診断選択肢(5枚目に遷移)
              </li>
              <li>
                <input type="radio" name="radio3" value="b_2" data-goto="d-type-4">診断選択肢(5枚目に遷移)
              </li>
            </ul>
          </div>
          <div class="diagnosis-transition">
            <p class="triggerBack">戻る</p>
            <p class="triggerNext triggerResult">結果を見る</p>
          </div>
        </div>
      </div>
      <!-- 診断4枚目　終了 -->

      <!-- 診断5枚目　開始 -->
      <div class="swiper-slide diagnosis-each" data-slidename="d-type-4">
        <!-- スライド左右に余白を付ける場合はこのセレクタに設定 -->
        <div class="swiper-slide-inner">
          <!-- スライド内のスタイルはここに記述 -->
          <div>
            <!-- 診断結果エリア -->
            <div class="diagnosis-results">
              <div class="result" id="resultA1">A1</div>
              <div class="result" id="resultA2">A2</div>
              <div class="result" id="resultB1">B1</div>
              <div class="result" id="resultB2">B2</div>
            </div>
          </div>
          <p class="triggerStart">診断１枚目に遷移ボタン</p>
        </div>
      </div>
      <!-- 診断5枚目　終了 -->
    </div>
  </div>
</div>

JavaScript

if (document.querySelector(".swiper") != null) {
  const diagnosisEach = document.querySelectorAll(".diagnosis-each");
  const triggerStart = document.querySelector(".triggerStart");
  const triggerNext = document.querySelectorAll(".triggerNext");
  const triggerBack = document.querySelectorAll(".triggerBack");
  const triggerResult = document.querySelectorAll(".triggerResult");
  const diagnosisResult = document.querySelector(".diagnosis-results");
  const results = document.querySelectorAll(".result");
  const checkedEach = document.querySelectorAll(".diagnosis-slide input[type='radio']");
  let slidePagingArray = []; //戻るボタン実装のため『スライド遷移履歴を配列に格納』するための空配列作成
  const swiper = new Swiper(".swiper", {
    //スライドのエフェクトを設定
    effect: "fade", //slideでスライド fadeでフェードイン coverflowで両橋見切れ状態 flipで回転

    //スライドのループを設定
    loop: false, //trueでループ falseでループしない(スライドが１枚の場合コントロールを表示させない場合はfalse)

    //スライドのスピードを設定
    speed: 300, //流し続ける場合は基本的に5000以上に設定

    //スワイプでスライドを有効化
    allowTouchMove: false, // falseで無効化 流し続ける場合はfalse
  });

  diagnosisEach.forEach(function (elem, index) {
    let slideName = elem.dataset.slidename;
    if (slideName == "d-type-1") {
      elem.querySelector(".triggerBack").classList.add("diagnosis-hide"); //診断開始画面の場合は戻るボタン非表示
    }

    elem.setAttribute("data-slideindex", index);
  });

  //診断結果参照用の配列

  let inputArray = {
    diagnosisData: {
      a: {
        a_1: "resultA1",
        a_2: "resultA2",
      },
      b: {
        b_1: "resultB1",
        b_2: "resultB2",
      },
    },
  };

  // ページ遷移関数を設定
  const slidePaging = function (target) {
    let targetAnchor;
    diagnosisEach.forEach(function (elem, index) {
      let getSlideName = elem.dataset.slidename;
      if (target == getSlideName) {
        targetAnchor = elem.dataset.slideindex;
        //『この関数の第１引数と一致する.diagnosis-each』の『slideindex』を取得
      }
    });
    swiper.slideTo(targetAnchor);
  };

  //進むボタンを押した場合

  triggerNext.forEach(function (elem, index) {
    elem.addEventListener("click", function () {
      if (elem.closest(".diagnosis-each").dataset.slidename == "d-type-top") {
        swiper.slideNext();
        //診断１枚目なら次のスライドに進む
      } else {
        let currentSlide = elem.closest(".diagnosis-each").dataset.slidename;
        slidePagingArray.push(currentSlide);
        //現在のスライドを取得し、スライド遷移履歴の配列最後尾に追加する
        let getAnchor = elem.closest(".diagnosis-each").querySelector("input[type='radio']:checked").dataset.goto;
        //チェックされているinputのカスタムデータ属性を取得
        if (getAnchor) {
          slidePaging(getAnchor);
        }
      }
    });
  });

  //戻るボタンを押した場合

  triggerBack.forEach(function (elem, index) {
    elem.addEventListener("click", function () {
      let getPrevPage = slidePagingArray.pop(); //スライド遷移履歴の配列から最後尾のデータを削除して取得
      slidePaging(getPrevPage);
    });
  });

  //結果を見るボタンを押した場合
  triggerResult.forEach(function (elem, index) {
    elem.addEventListener("click", function () {
      let resultArray = []; //診断結果用の配列を作成
      checkedEach.forEach(function (elem, index) {
        if (elem.checked) {
          let checkedVal = elem.value;
          resultArray.push(checkedVal);
          //チェックされているラジオボックス毎に、そのvalueを配列へ追加
        }
      });
      console.log(resultArray);
      let outputArray = []; //診断結果出力用の配列を作成
      if (resultArray[0] == "a") {
        let answerA1 = resultArray[1];
        outputArray.push(inputArray["diagnosisData"]["a"][answerA1]);
      } else if (resultArray[0] == "b") {
        let answerB1 = resultArray[1];
        outputArray.push(inputArray["diagnosisData"]["b"][answerB1]);
      }
      console.log(outputArray);

      outputArray.forEach(function (elem, index) {
        let resultCode = "#" + elem;
        console.log(resultCode);
        diagnosisResult.querySelector(resultCode).classList.add("diagnosis-show");
      });
    });
  });

  //診断１枚目に戻るボタンを押した場合

  triggerStart.addEventListener("click", function () {
    slidePagingArray = []; //診断結果ページから診断リスタートボタンを押した場合、スライド遷移履歴を初期化
    checkedEach.forEach(function (elem, index) {
      elem.checked = false; //ラジオボックスのチェックをリセット
      swiper.slideTo(0);
    });
    results.forEach(function (elem, index) {
      elem.classList.remove("diagnosis-show");
    });
  });
}

scss_for_JavaScript

.swiper-container {
  width: 750px; //希望のスライダー横幅
  height: 500px; //希望のスライダー高さ
  margin: 0 auto;
  .swiper {
    width: 100%;
    height: 100%;
    .swiper-wrapper {
      width: 100%;
      height: 100%;
      .swiper-slide {
        background-color: #fff; //スライドエフェクトをフェードにする場合背景色の指定がないと前のスライドが透けて見える
        .swiper-slide-inner {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

.diagnosis-hide {
  display: none;
}

.result {
  display: none;
  &.diagnosis-show {
    display: block;
  }
}