added carousel2

ShiomiHF · Jul 18, 2023 · c8f67ce · c8f67ce
1 parent 35acb57
commit c8f67ce
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 31 deletions.
diff --git a/carousel.js b/carousel.js
@@ -32,7 +32,41 @@ const swiper = new Swiper(".slider1", {
   },
 });
 
-const swiperGrid = new Swiper(".slider2", {
+const swiperOuter = document.getElementById("swiper-outer");
+const swiperSlides = document.getElementsByClassName("swiper-slide");
+const breakPoint = 800;
+let mySwiper;
+let mySwiperBool;
+
+window.addEventListener(
+  "load",
+  () => {
+    if (breakPoint < window.innerWidth) {
+      mySwiperBool = false;
+    } else {
+      createSwipter();
+      mySwiperBool = true;
+    }
+  },
+  false
+);
+
+window.addEventListener(
+  "resize",
+  () => {
+    if (breakPoint < window.innerWidth && mySwiperBool) {
+      mySwiper.destroy(false, true);
+      mySwiperBool = false;
+    } else if (breakPoint >= window.innerWidth && !mySwiperBool) {
+      createSwipter();
+      mySwiperBool = true;
+    }
+  },
+  false
+);
+
+const createSwipter = () => {
+  mySwiper = new Swiper(".slider2", {
     loop: true, //ループ
     slidesPerView: 1,
     centeredSlides: true,
@@ -41,18 +75,28 @@ const swiperGrid = new Swiper(".slider2", {
       //ページネーション（ドット）
       el: ".swiper-pagination",
     },
-    breakpoints: {
-      //小さい順に設定する
-      // 599px以上の場合
-      768: {
-        slidesPerView: 3,
-        spaceBetween: 20,
-      },
-      // 1024px以上の場合
-      1024: {
-        slidesPerView: 3,
-
-        spaceBetween: 60,
-      },
-    },
   });
+};
+// const swiperGrid = new Swiper(".slider2", {
+//   loop: true, //ループ
+//   slidesPerView: 1,
+//   centeredSlides: true,
+//   spaceBetween: 12,
+//   pagination: {
+//     //ページネーション（ドット）
+//     el: ".swiper-pagination",
+//   },
+//   breakpoints: {
+//     //小さい順に設定する
+//     // 599px以上の場合
+//     768: {
+//       slidesPerView: 3,
+//       spaceBetween: 20,
+//     },
+//     // 1024px以上の場合
+//     1024: {
+//       slidesPerView: 3,
+//       spaceBetween: 60,
+//     },
+//   },
+// });
diff --git a/index.html b/index.html
@@ -170,22 +170,24 @@ <h2>GALLERY</h2>
         <div class="swiper-button-prev"></div>
         <div class="swiper-button-next"></div>
       </div>
-      <div class="swiper slider2">
-        <div class="swiper-wrapper">
-          <div class="swiper-slide">
-            <h3 class="m-g-h3">LOREM IPSUM</h3>
-            <img src="/img/IMG03.jpg" alt="" />
-            <h3 class="d-g-h3">LOREM IPSUM</h3>
-          </div>
-          <div class="swiper-slide">
-            <h3 class="m-g-h3">LOREM IPSUM</h3>
-            <img src="/img/IMG03.jpg" alt="" />
-            <h3 class="d-g-h3">LOREM IPSUM</h3>
-          </div>
-          <div class="swiper-slide">
-            <h3 class="m-g-h3">LOREM IPSUM</h3>
-            <img src="/img/IMG03.jpg" alt="" />
-            <h3 class="d-g-h3">LOREM IPSUM</h3>
+      <div id="swiper-outer">
+        <div class="swiper slider2">
+          <div class="swiper-wrapper">
+            <div class="swiper-slide">
+              <h3 class="m-g-h3">LOREM IPSUM</h3>
+              <img src="/img/IMG03.jpg" alt="" />
+              <h3 class="d-g-h3">LOREM IPSUM</h3>
+            </div>
+            <div class="swiper-slide">
+              <h3 class="m-g-h3">LOREM IPSUM</h3>
+              <img src="/img/IMG03.jpg" alt="" />
+              <h3 class="d-g-h3">LOREM IPSUM</h3>
+            </div>
+            <div class="swiper-slide">
+              <h3 class="m-g-h3">LOREM IPSUM</h3>
+              <img src="/img/IMG03.jpg" alt="" />
+              <h3 class="d-g-h3">LOREM IPSUM</h3>
+            </div>
           </div>
         </div>
       </div>