테마 버전3

assets/js/common.js

@@ -172,12 +172,12 @@ $(document).ready(function() {
         slidesPerView: "auto",
         spaceBetween: 20,
         freeMode: true,
-    }); 
+    });
 
     //PDP Display Theme
     let flagAutoPlay = true;
     let swiperThemeOption = {
-        slidesPerView: 8,
+        slidesPerView: 'auto',
         loop:true,  
         freeMode: true,
         autoplay: {
@@ -185,21 +185,21 @@ $(document).ready(function() {
             disableOnInteraction: false,
         },
         speed: 3000,
-        navigation: {
-          nextEl: ".pdpDisplayThemeSwiper .swiper-button-next",
-          prevEl: ".pdpDisplayThemeSwiper .swiper-button-prev",
-        },
+        // navigation: {
+        //   nextEl: ".pdpDisplayThemeSwiper .swiper-button-next",
+        //   prevEl: ".pdpDisplayThemeSwiper .swiper-button-prev",
+        // },
         breakpoints: {
             // when window width is >= 320px
             320: {
-                spaceBetween: 20,
+                spaceBetween: 10,
             },
             // when window width is >= 480px
             480: {
             },
             // when window width is >= 640px
             640: {
-                spaceBetween: 40,
+                spaceBetween: 14,
             }
         },
         on: {
@@ -230,10 +230,10 @@ $(document).ready(function() {
         //     delay: 0,
         //     disableOnInteraction: false
         // },
-        navigation: {
-          nextEl: ".pdpDisplayThemeSwiper .swiper-button-next",
-          prevEl: ".pdpDisplayThemeSwiper .swiper-button-prev",
-        },
+        // navigation: {
+        //   nextEl: ".pdpDisplayThemeSwiper .swiper-button-next",
+        //   prevEl: ".pdpDisplayThemeSwiper .swiper-button-prev",
+        // },
         breakpoints: {
             '@0.75': {
                 slidesPerView: 5,
@@ -269,7 +269,15 @@ $(document).ready(function() {
             },
         },
     }
-    var swiperTheme = new Swiper(".pdpDisplayThemeSwiper", swiperThemeNavOption);
+    var swiperTheme = new Swiper(".pdpDisplayThemeSwiper", swiperThemeOption); 
+    
+    var swiperThemeDtl = new Swiper(".displayThemeDtl", {
+        slidesPerView: 1,
+        navigation: {
+          nextEl: ".displayThemeDtl .swiper-button-next",
+          prevEl: ".displayThemeDtl .swiper-button-prev",
+        },
+    });
     
 
     // $(document).on("click", ".swiper-navigation .swiper-button-next", function() {