Wordpressコンタクトフォームとswiperの連携について

お世話になります。

こちらのページを参考にしまして、
https://colers.jp/snippet/step-forms-for-contactform7
WORDPRESSのコンタクトフォームとswiper.jsを組み合わせて、ステップ式のフォームの構築中です。

ただ、参考サイトのようにスライドを２つ作成し、２ステップの場合では次へボタンで次ステップへ移動するのですが、
３つめのスライドを作って、３ステップにすると、２から３ステップ目が次へボタンで移動せず、困っております。

参考サイトでは、swiper-slideクラスを追加すれば、その分ステップが追加出来ると記載あったのですが。

ご教授いただけますと助かります。

現状のjsとhtmlは下記になります。
※swipe効果は参考サイトではスライドでしたが、フェードにしてあります。

html
1<div class="swiper-container">
2    <div class="swiper-wrapper">
3        <div class="swiper-slide">
4            １ステップフォーム内容
5            <input type="button" class="next-step" value="次へ">
6        </div>
7        <div class="swiper-slide">
8            ２ステップフォーム内容
9            <input type="button" class="prev-step" value="戻る">
10            <input type="button" class="next-step" value="次へ">
11        </div>
12        <div class="swiper-slide">
13            ３ステップフォーム内容
14            <input type="button" class="prev-step" value="戻る">
15            [submit "送信"]
16        </div>
17    </div>
18</div>

js
1/* Contact Form7 Enterで送信しないようにする処理
2-----------------------------------------*/
3function submitStop(e){
4
5  if (!e) var e = window.event;
6  if(e.keyCode == 13)
7    return false;
8}
9window.onload = function (){
10  var list = document.getElementsByTagName("input");
11  for(var i=0; i<list.length; i++){
12    if(list[i].type == 'email' || list[i].type == 'password'|| list[i].type == 'text'|| list[i].type == 'number'){
13      list[i].onkeypress = function (event){
14        return submitStop(event);
15      };
16    }
17  }
18}
19
20/* Tabキーを無効に
21-----------------------------------------*/
22window.onkeydown = function(e) {
23  if (e.keyCode == 9)
24    return false;
25}
26
27/* Swiperでステップ式
28-----------------------------------------*/
29const nextBtn = document.querySelector(".next-step");
30const prevBtn = document.querySelector(".prev-step");
31const swiperDemo = new Swiper('.swiper-container', {
32  effect: "fade", //フェードのエフェクト
33  fadeEffect: {
34        crossFade: true
35      },
36  allowTouchMove: false
37
38});
39nextBtn.addEventListener("click", () => {
40  swiperDemo.slideNext();
41});
42prevBtn.addEventListener("click", () => {
43  swiperDemo.slidePrev();
44});

行動規範の内容に同意します

回答1件

自己解決

js、下段部を下記のように編集して解決いたしました。

js
1/* Swiperでステップ式
2-----------------------------------------*/
3const nextBtns = document.querySelectorAll(".next-step");
4const prevBtns = document.querySelectorAll(".prev-step");
5const swiperDemo = new Swiper('.swiper-container', {
6  effect: "fade", //フェードのエフェクト
7  fadeEffect: {
8        crossFade: true
9      },
10  allowTouchMove: false
11});
12nextBtns.forEach(btn => {
13  btn.addEventListener("click", () => {
14    swiperDemo.slideNext();
15  });
16});
17prevBtns.forEach(btn => {
18  btn.addEventListener("click", () => {
19    swiperDemo.slidePrev();
20  });
21});