업로드

assets/css/pdp_detail.css

@@ -2049,6 +2049,12 @@
   z-index: 2;
   height: 32.7rem;
 }
+.displayTheme .comp_top .comp_body .text_area {
+  display: flex;
+}
+.displayTheme .comp_top .comp_body .text_area > * {
+  flex: 1;
+}
 .displayTheme .comp_md {
   position: relative;
   z-index: 2;

assets/css/pdp_detail.scss

@@ -1956,6 +1956,14 @@
     .comp_top {
         z-index: 2;
         height: 32.7rem;
+        .comp_body  {
+            .text_area {
+                display: flex;
+                > * {
+                    flex:1;
+                }
+            }
+        }
     }
     .comp_md {
         position: relative;

assets/js/common.js

@@ -173,13 +173,14 @@ $(document).ready(function() {
         spaceBetween: 20,
         freeMode: true,
     }); 
+
     //PDP Display Theme
+    let flagAutoPlay = true;
     var swiperTheme = new Swiper(".pdpDisplayThemeSwiper", {
         slidesPerView: "auto",
         loop:true,  
         freeMode: true,
         autoplay: {
-            pauseOnMouseEnter: true,
             delay:1,
             disableOnInteraction: false,
         },
@@ -198,22 +199,49 @@ $(document).ready(function() {
             }
         },
         on: {
-            init: function (swiper) {
-              console.log('swiper initialized')
-                var swiperContainer = document.querySelector('.swiper-container');
-
-                // Pause autoplay when mouse enters the Swiper container
-                swiperContainer.addEventListener('mouseenter', function() {
-                swiperTheme.autoplay.stop();
-                });
-
-                // Resume autoplay when mouse leaves the Swiper container
-                swiperContainer.addEventListener('mouseleave', function() {
-                swiperTheme.autoplay.start();
-                });
+            init: function () {
             },
           },
-    }); 
+    });
+    $('.pdpDisplayThemeSwiper').hover(function(){
+        if(flagAutoPlay==true){
+            swiperTheme.autoplay.stop();
+        }
+    }, function(){
+        if(flagAutoPlay==true){
+            swiperTheme.autoplay.start();
+        }
+    });
+    
+                
+    $(document).on("click", ".dtthumb", function() {
+                    
+        const dtlImgPath = $(this).attr("value");
+        const dtlImgs = $(".dtlImgs");
+        $(this).parent().find("li").removeClass("active");
+        $(this).addClass("active");
+
+        $('.dtlImgs .item').addClass('change')
+        setTimeout(function() {
+            $('.dtlImgs .item').removeClass('change')
+        }, 200);
+
+        $(".themeImg").each(function(e){
+            const idx = e+1;
+            const src = $(this).attr("src");
+            const lastIndex = src.lastIndexOf("/");
+            const pathWithoutFileName = src.substring(0, lastIndex);
+
+            $(this).attr("src", `${pathWithoutFileName}/${dtlImgPath}-${idx}.png`);
+        });
+        const visualBgSrc = $(".visualBg img").attr("src");
+        const visualBgLastIndex = visualBgSrc.lastIndexOf("/");
+        const visualBgPathWithoutFileName = visualBgSrc.substring(0, visualBgLastIndex);
+
+        $(".visualBg img").attr("src", `${visualBgPathWithoutFileName}/${dtlImgPath}_screen.jpg`);
+
+        flagAutoPlay = false;
+    });
 
     
 
@@ -445,38 +473,4 @@ $(document).on("click", ".lpthumb", function() {
     $(".lighting_pattern_movie").attr("src", $(this).attr("value"));
     $(".lighting_pattern_movie").load();
 	$(".lighting_pattern_movie").play();
-});
-// PDP Lighting Pattern
-$(document).on("click", ".dtthumb", function() {
-    const dtlImgPath = $(this).attr("value");
-    const dtlImgs = $(".dtlImgs");
-    $(this).parent().find("li").removeClass("active");
-    $(this).addClass("active");
-
-    $('.dtlImgs .item').addClass('change')
-    setTimeout(function() {
-        $('.dtlImgs .item').removeClass('change')
-    }, 200);
-
-
-    // AOS.refreshHard(); // Optional: Refresh AOS
-    // AOS.init();
-
-    $(".themeImg").each(function(e){
-        const idx = e+1;
-        const src = $(this).attr("src");
-        const lastIndex = src.lastIndexOf("/");
-        const pathWithoutFileName = src.substring(0, lastIndex);
-
-        $(this).attr("src", `${pathWithoutFileName}/${dtlImgPath}-${idx}.png`);
-
-    });
-    const visualBgSrc = $(".visualBg img").attr("src");
-    console.log(visualBgSrc)
-    const visualBgLastIndex = visualBgSrc.lastIndexOf("/");
-    const visualBgPathWithoutFileName = visualBgSrc.substring(0, visualBgLastIndex);
-
-    $(".visualBg img").attr("src", `${visualBgPathWithoutFileName}/${dtlImgPath}_screen.jpg`);
-
-
 });

product/pdp_display_theme.html

@@ -31,10 +31,10 @@
         <script type="text/javascript"  charset="UTF-8"  src="../assets/js/library/jquery-ui.min.js?v1"></script>
         <script type="text/javascript"  charset="UTF-8"  src="../assets/js/library/swiper.min.js?v1"></script>
         <script type="text/javascript"  charset="UTF-8"  src="../assets/js/library/aos.js?v1"></script>
-        <script type="text/javascript"  charset="UTF-8"  src="../assets/js/common.js?v3"></script>
+        <script type="text/javascript"  charset="UTF-8"  src="../assets/js/common.js?v1.1"></script>
         <!--상품상세 페이지 css 분리-->
-        <link rel="stylesheet" charset="UTF-8" href="../assets/css/product.css?v3" type="text/css" />
-        <link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v3" type="text/css" />
+        <link rel="stylesheet" charset="UTF-8" href="../assets/css/product.css?v1.1" type="text/css" />
+        <link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v1.1" type="text/css" />
         <link rel="shortcut icon" href="../assets/images/kia/home_icon.png" />
         <link rel="apple-touch-icon-precomposed" href="../assets/images/kia/home_icon.png" />
         <link rel="shortcut icon" href="../assets/images/kia/favicon-16x16.png">
@@ -290,8 +290,8 @@
                             <h2>구성 상품</h2>
                             <div class="optionList">
                                 <div class="checkBtn withVideo">
-                                    <input type="checkbox" name="check" id="checkeOne" value="Atlanta Hawks"  checked >
-                                    <label for="checkeOne">
+                                    <input type="checkbox" name="check" id="check1" value="Atlanta Hawks"  checked >
+                                    <label for="check1">
                                          <p><img src="../assets/images/kia/pdp/display_theme/NBA_Theme1.png" alt="Atlanta Hawks"></p>
                                         <div class="optionText">
                                             <p>
@@ -302,8 +302,8 @@
                                     </label>
                                 </div>
                                 <div class="checkBtn withVideo">
-                                    <input type="checkbox" name="check" id="checkeTwo"  value="Boston Celtics">
-                                    <label for="checkeOne">
+                                    <input type="checkbox" name="check" id="check2"  value="Boston Celtics">
+                                    <label for="check2">
                                         <p><img src="../assets/images/kia/pdp/display_theme/NBA_Theme2.png" alt="Boston Celtics"></p>
                                         <div class="optionText">
                                             <p>
@@ -314,8 +314,8 @@
                                     </label>
                                 </div>
                                 <div class="checkBtn disabledBtn">
-                                   <input type="checkbox" name="check"  id="checkeThree" value="Chicago Bulls" disabled>
-                                   <label for="checkeThree">
+                                   <input type="checkbox" name="check"  id="check3" value="Chicago Bulls" disabled>
+                                   <label for="check3">
                                         <p><img src="../assets/images/kia/pdp/display_theme/NBA_Theme3.png" alt="Chicago Bulls"></p>
                                         <div class="optionText">
                                             <p>
@@ -326,8 +326,8 @@
                                     </label>
                                 </div>
                                 <div class="checkBtn">
-                                    <input type="checkbox" name="check" id="checkeTwo"  value="Brooklyn Nets">
-                                    <label for="checkeTwo">
+                                    <input type="checkbox" name="check" id="check4"  value="Brooklyn Nets">
+                                    <label for="check4">
                                         <p><img src="../assets/images/kia/pdp/display_theme/NBA_Theme4.png" alt="Brooklyn Nets"></p>
                                         <div class="optionText">
                                             <p>
@@ -338,8 +338,8 @@
                                     </label>
                                 </div>
                                 <div class="checkBtn disabledBtn">
-                                   <input type="checkbox" name="check"  id="checkeThree" value="Charlotte Hornets" disabled>
-                                   <label for="checkeThree">
+                                   <input type="checkbox" name="check"  id="check5" value="Charlotte Hornets" disabled>
+                                   <label for="check5">
                                         <p><img src="../assets/images/kia/pdp/display_theme/NBA_Theme5.png" alt="Charlotte Hornets"></p>
                                         <div class="optionText">
                                             <p>
@@ -350,8 +350,8 @@
                                     </label>
                                 </div>
                                 <div class="checkBtn">
-                                    <input type="checkbox" name="check" id="checkeTwo"  value="ELEGANT">
-                                    <label for="checkeTwo">
+                                    <input type="checkbox" name="check" id="check6"  value="ELEGANT">
+                                    <label for="check6">
                                         <p><img src="../assets/images/kia/pdp/display_theme/NBA_Theme6.png" alt="ELEGANT"></p>
                                         <div class="optionText">
                                             <p>
@@ -413,7 +413,6 @@
             <div class="editorInner">
                 
 
-
 <div class="comp_wide comp_1x_w_v_o_b displayTheme">
     <div class="image_area visualBg">
         <img src="../assets/images/kia/pdp/display_theme/NBA_Theme1_screen.jpg" alt="디스플레이 테마 이미지">
@@ -459,6 +458,10 @@
                         <img src="../assets/images/kia/pdp/display_theme/NBA_Theme6.png" alt="Atlanta">
                         <p>Atlanta</p>
                     </li>
+                    <li class="swiper-slide dtthumb" value="NBA_Theme7">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme7.png" alt="Cleveland Cavaliers">
+                        <p>Cleveland Cavaliers</p>
+                    </li>
                 </ul>
             </div>
         </div>