質問編集履歴

window.addEventListener('DOMContentLoaded', function() {　の部分を追加しました。

2019/04/23 06:03

投稿

gutsu8ma

スコア14

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -18,9 +18,25 @@
+###追記
+■「swip.js」を修正しなんとか動作することはできましたが、
+コンソールで以下のエラーがでました。
+swiper.min.js
+Uncaught TypeError: Cannot read property 'addEventListener' of undefined
+「swiper.min.js」は一切触れていないため原因として考えられるのは「swip.js」の記述に問題があるのかと思いますが、解決方法が分かりません・・。
-※jsについては知識がなく、過去の質問を参考にしながら対処していますが
+また「swip.js」に記載した内容もおそらく良い書き方ではないと思いますので
+スマートな記載方法やエラーが出ない方法をお教えいただきたいです。
@@ -148,11 +164,9 @@
 ```
-### js
+### swip.js（修正前）
-```ここに言語名を入力
+```
 var scaleWindowW = function() {
@@ -236,7 +250,7 @@
       });
     } else if (scaleWindowW() >= 599 && swiper05 != undefined) {
@@ -272,68 +286,352 @@
 }, false);
 ```
-### 試したこと
-おそらく「swiper-container」「swiper-container02」「swiper-container03」のように分けて設定すべきかと思いましたが、jsの修正方法が分からず色々してみましたが
-シンタックスエラーおきてしまい、自分の実力では対処ができないため質問させていただきました。
-https://xn--web-oi9du9bc8tgu2a.com/demos/swiper/05.htmlのサイトを参考に作成し
-その後下記の部分は過去の質問や参考を見て追記しました。
-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
+### 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);
+```