swiper.jsを使用し、1ページ内で複数設置したところ2つめ以降が動かなくなりました。

Question

前提・実現したいこと

PCサイトでは画像を2列2行の4枚を表示
SPサイトでは画像を1枚表示でスライド
という風にしたいため、「swiper.js」を使用していましたが

１ページ内で複数設置したところ２つめ以降が全く動作しなくなりました。
・画像をスワイプしても動かない。
・「next」「prev」ボタンを押しても動かない。
・「swiper-pagination」も表示されない。

###追記
■「swip.js」を修正しなんとか動作することはできましたが、
コンソールで以下のエラーがでました。

swiper.min.js
Uncaught TypeError: Cannot read property 'addEventListener' of undefined

「swiper.min.js」は一切触れていないため原因として考えられるのは「swip.js」の記述に問題があるのかと思いますが、解決方法が分かりません・・。
また「swip.js」に記載した内容もおそらく良い書き方ではないと思いますので
スマートな記載方法やエラーが出ない方法をお教えいただきたいです。

HTML

<div class="swip-wrap">
	<div class="swiper-container">
	    <!-- Additional required wrapper -->
	    <div class="swiper-wrapper">
	        <!-- Slides -->
	        <div class="swiper-slide">画像1</div>
	        <div class="swiper-slide">画像2</div>
	        <div class="swiper-slide">画像3</div>
	        <div class="swiper-slide">画像4</div>
	    </div>
	    <!-- If we need pagination -->
	    <div class="swiper-pagination"></div>
	    
	    <!-- If we need navigation buttons -->
	    <div class="swiper-button-prev"></div>
	    <div class="swiper-button-next"></div>
	</div><!-- swiper-container -->
</div><!-- swip-wrap -->


<div class="swip-wrap">
	<div class="swiper-container">
	    <!-- Additional required wrapper -->
	    <div class="swiper-wrapper">
	        <!-- Slides -->
	        <div class="swiper-slide">画像1</div>
	        <div class="swiper-slide">画像2</div>
	        <div class="swiper-slide">画像3</div>
	        <div class="swiper-slide">画像4</div>
	    </div>
	    <!-- If we need pagination -->
	    <div class="swiper-pagination"></div>
	    
	    <!-- If we need navigation buttons -->
	    <div class="swiper-button-prev"></div>
	    <div class="swiper-button-next"></div>
	</div><!-- swiper-container -->
</div><!-- swip-wrap -->


<div class="swip-wrap">
	<div class="swiper-container">
	    <!-- Additional required wrapper -->
	    <div class="swiper-wrapper">
	        <!-- Slides -->
	        <div class="swiper-slide">画像1</div>
	        <div class="swiper-slide">画像2</div>
	        <div class="swiper-slide">画像3</div>
	        <div class="swiper-slide">画像4</div>
	    </div>
	    <!-- If we need pagination -->
	    <div class="swiper-pagination"></div>
	    
	    <!-- If we need navigation buttons -->
	    <div class="swiper-button-prev"></div>
	    <div class="swiper-button-next"></div>
	</div><!-- swiper-container -->
</div><!-- swip-wrap -->

swip.js（修正前）

var scaleWindowW = function() {
  var w = (window.innerWidth || document.documentElement.clientWidth || 0);
  return w;
};

window.addEventListener('DOMContentLoaded', function() {
  var swiper05 = undefined;
  var swiperEl = document.querySelector('.swiper-container');
  var swiperWrapper = document.getElementsByClassName('swiper-wrapper');
  var swiperSlide = document.getElementsByClassName('swiper-slide');

  var initSwiper = function() {
    if (scaleWindowW() < 600 && swiper05 == undefined) {
      swiper05 = new Swiper(swiperEl, {
        loop: true,
        slidesPerView: 2,
        centeredSlides : true,
        navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination',
                type: 'bullets',
            },
            scrollbar: {
                el: '.swiper-scrollbar',
                draggable: true,
            },
  breakpoints: {
    600: {
      slidesPerView: 2,
      spaceBetween: 10
    },
    599: {
      slidesPerView: 1,
      spaceBetween: 0
    }
  }

      });

    } else if (scaleWindowW() >= 599 && swiper05 != undefined) {
      swiper05.destroy();
      swiper05 = undefined;

      for ( var i = 0; i < swiperWrapper.length; i++ ) {
        swiperWrapper[i].removeAttribute('style');
      }
      for ( var i =0; i < swiperSlide.length; i++ ) {
        swiperSlide[i].removeAttribute('style');
      }

    }
  }
  initSwiper();

  window.addEventListener('resize',initSwiper);
}, false);

swip.js（修正後）

var scaleWindowW = function() {
  var w = (window.innerWidth || document.documentElement.clientWidth || 0);
  return w;
};

window.addEventListener('DOMContentLoaded', function() {
  var swiper05 = undefined;
  var swiperEl = document.querySelector('.swiper-container');
  var swiperWrapper = document.getElementsByClassName('swiper-wrapper');
  var swiperSlide = document.getElementsByClassName('swiper-slide');

  var initSwiper = function() {
    if (scaleWindowW() < 600 && swiper05 == undefined) {
      swiper05 = new Swiper(swiperEl, {
        loop: true,
        centeredSlides : true,
        navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination',
                type: 'bullets',
            },
            scrollbar: {
                el: '.swiper-scrollbar',
                draggable: true,
            },
          breakpoints: {
            600: {
              slidesPerView: 2,
              spaceBetween: 10
            },
            599: {
              slidesPerView: 1,
              spaceBetween: 0
            }
          }

      });

    } else if (scaleWindowW() >= 599 && swiper05 != undefined) {
      swiper05.destroy();
      swiper05 = undefined;

      for ( var i = 0; i < swiperWrapper.length; i++ ) {
        swiperWrapper[i].removeAttribute('style');
      }
      for ( var i =0; i < swiperSlide.length; i++ ) {
        swiperSlide[i].removeAttribute('style');
      }

    }
  }
  initSwiper();

  window.addEventListener('resize',initSwiper);
}, false);



window.addEventListener('DOMContentLoaded', function() {
  var swiper05 = undefined;
  var swiperEl02 = document.querySelector('.swiper-container02');
  var swiperWrapper = document.getElementsByClassName('swiper-wrapper');
  var swiperSlide = document.getElementsByClassName('swiper-slide');

  var initSwiper = function() {
    if (scaleWindowW() < 600 && swiper05 == undefined) {
      swiper05 = new Swiper(swiperEl02, {
        loop: true,
        centeredSlides : true,
        navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination',
                type: 'bullets',
            },
            scrollbar: {
                el: '.swiper-scrollbar',
                draggable: true,
            },
          breakpoints: {
            600: {
              slidesPerView: 2,
              spaceBetween: 10
            },
            599: {
              slidesPerView: 1,
              spaceBetween: 0
            }
          }

      });

    } else if (scaleWindowW() >= 599 && swiper05 != undefined) {
      swiper05.destroy();
      swiper05 = undefined;

      for ( var i = 0; i < swiperWrapper.length; i++ ) {
        swiperWrapper[i].removeAttribute('style');
      }
      for ( var i =0; i < swiperSlide.length; i++ ) {
        swiperSlide[i].removeAttribute('style');
      }

    }
  }
  initSwiper();

  window.addEventListener('resize',initSwiper);
}, false);



window.addEventListener('DOMContentLoaded', function() {
  var swiper05 = undefined;
  var swiperEl03 = document.querySelector('.swiper-container03');
  var swiperWrapper = document.getElementsByClassName('swiper-wrapper');
  var swiperSlide = document.getElementsByClassName('swiper-slide');

  var initSwiper = function() {
    if (scaleWindowW() < 600 && swiper05 == undefined) {
      swiper05 = new Swiper(swiperEl03, {
        loop: true,
        centeredSlides : true,
        navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination',
                type: 'bullets',
            },
            scrollbar: {
                el: '.swiper-scrollbar',
                draggable: true,
            },
          breakpoints: {
            600: {
              slidesPerView: 2,
              spaceBetween: 10
            },
            599: {
              slidesPerView: 1,
              spaceBetween: 0
            }
          }

      });

    } else if (scaleWindowW() >= 599 && swiper05 != undefined) {
      swiper05.destroy();
      swiper05 = undefined;

      for ( var i = 0; i < swiperWrapper.length; i++ ) {
        swiperWrapper[i].removeAttribute('style');
      }
      for ( var i =0; i < swiperSlide.length; i++ ) {
        swiperSlide[i].removeAttribute('style');
      }

    }
  }
  initSwiper();

  window.addEventListener('resize',initSwiper);
}, false);

Answer 1

Uncaught TypeError: Cannot read property 'addEventListener' of undefined

下記のように指定しているのに.swiper-scrollbarがHTMLに無いのでは。

            scrollbar: {
                el: '.swiper-scrollbar',
                draggable: true,
            },
```**動くサンプル：**[https://jsfiddle.net/6ps1nbc0/](https://jsfiddle.net/6ps1nbc0/)

Comments

[gutsu8ma]

ありがとうございます。
下記の記述を削除したところエラーがなくなりました。

scrollbar: {
el: '.swiper-scrollbar',
draggable: true,
},