teratail
回答率
85.48%
質問するログイン新規登録

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

新規登録して質問してみよう
ただいま回答率
85.48%
トップJavaScriptに関する質問
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

10193閲覧

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

gutsu8ma
gutsu8ma

総合スコア14

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2019/04/23 02:21

編集2019/04/23 06:03

0

1

前提・実現したいこと

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);

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1件

0

ベストアンサー

Uncaught TypeError: Cannot read property 'addEventListener' of undefined

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

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

投稿2019/04/23 13:37

kei344
kei344

総合スコア69400

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gutsu8ma
gutsu8ma

2019/04/24 14:22 編集

ありがとうございます。 下記の記述を削除したところエラーがなくなりました。 scrollbar: { el: '.swiper-scrollbar', draggable: true, },
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

トップJavaScriptに関する質問

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