테마 버전 2

assets/js/common.js

@@ -176,8 +176,8 @@ $(document).ready(function() {
 
     //PDP Display Theme
     let flagAutoPlay = true;
-    var swiperTheme = new Swiper(".pdpDisplayThemeSwiper", {
-        slidesPerView: "auto",
+    let swiperThemeOption = {
+        slidesPerView: 8,
         loop:true,  
         freeMode: true,
         autoplay: {
@@ -185,6 +185,10 @@ $(document).ready(function() {
             disableOnInteraction: false,
         },
         speed: 3000,
+        navigation: {
+          nextEl: ".pdpDisplayThemeSwiper .swiper-button-next",
+          prevEl: ".pdpDisplayThemeSwiper .swiper-button-prev",
+        },
         breakpoints: {
             // when window width is >= 320px
             320: {
@@ -200,25 +204,88 @@ $(document).ready(function() {
         },
         on: {
             init: function () {
+                $('.pdpDisplayThemeSwiper').hover(function(){
+                    if(flagAutoPlay==true){
+                        swiperTheme.autoplay.stop();
+                        console.log("이게 타냐")
+                    }
+                }, function(){
+                    if(flagAutoPlay==true){
+                        swiperTheme.autoplay.start();
+                        console.log("이게 타냐22222")
+                    }
+                });
             },
-          },
-    });
-    $('.pdpDisplayThemeSwiper').hover(function(){
-        if(flagAutoPlay==true){
-            swiperTheme.autoplay.stop();
-        }
-    }, function(){
-        if(flagAutoPlay==true){
-            swiperTheme.autoplay.start();
-        }
-    });
+        },
+    }
+    let swiperThemeNavOption = {
+        slidesPerView: 3,
+        slidesPerGroup: 3,
+        spaceBetween: 14,
+        loop: true,
+        freeMode: true,
+        centeredSlides: true,
+        // speed: 1000,
+        // autoplay: {
+        //     delay: 0,
+        //     disableOnInteraction: false
+        // },
+        navigation: {
+          nextEl: ".pdpDisplayThemeSwiper .swiper-button-next",
+          prevEl: ".pdpDisplayThemeSwiper .swiper-button-prev",
+        },
+        breakpoints: {
+            '@0.75': {
+                slidesPerView: 5,
+                slidesPerGroup: 5,
+                spaceBetween: 10,
+            },
+            '@1.00': {
+                slidesPerView: 6,
+                slidesPerGroup: 6,
+                spaceBetween: 14,
+            },
+            '@1.50': {
+                slidesPerView: 8,
+                slidesPerGroup: 8,
+                spaceBetween: 14,
+            }
+        },
+        on: {
+            init: function (slide) {
+
+                console.log(slide)
+                $('.pdpDisplayThemeSwiper').hover(function(){
+                    if(flagAutoPlay==true){
+                        swiperTheme.autoplay.stop();
+                        console.log("333 타냐")
+                    }
+                }, function(){
+                    if(flagAutoPlay==true){
+                        swiperTheme.autoplay.stop();
+                        console.log("3333이게 타냐22222")
+                    }
+                });
+            },
+        },
+    }
+    var swiperTheme = new Swiper(".pdpDisplayThemeSwiper", swiperThemeNavOption);
     
+
+    // $(document).on("click", ".swiper-navigation .swiper-button-next", function() {
+    //     // swiperTheme.autoplay.stop();
+    //     flagAutoPlay==false
+    //     swiperTheme.destroy();
+    //     console.log('d')
+    //     swiperTheme = new Swiper(".pdpDisplayThemeSwiper", swiperThemeNavOption);
+    //     swiperTheme.autoplay.stop();
+    // });
                 
     $(document).on("click", ".dtthumb", function() {
                     
         const dtlImgPath = $(this).attr("value");
         const dtlImgs = $(".dtlImgs");
-        $(this).parent().find("li").removeClass("active");
+        $(this).parent().find(".dtthumb").removeClass("active");
         $(this).addClass("active");
 
         $('.dtlImgs .item').addClass('change')