From c8f67ce41fb0856c6e219772e47802a3ec72f4c1 Mon Sep 17 00:00:00 2001
From: Shiomi <shiomi.hoshiya@gmail.com>
Date: Tue, 18 Jul 2023 15:07:52 +0200
Subject: [PATCH] added carousel2

---
 carousel.js | 74 ++++++++++++++++++++++++++++++++++++++++++-----------
 index.html  | 34 ++++++++++++------------
 2 files changed, 77 insertions(+), 31 deletions(-)

diff --git a/carousel.js b/carousel.js
index 3176bc7..48ebaa5 100644
--- 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
index 59885e9..bef8295 100644
--- 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>