자동 재생 수정 / 툴팁 추가

assets/css/pdp_detail.css

@@ -1969,6 +1969,9 @@
   background: rgb(255, 255, 255);
   background: linear-gradient(180deg, rgba(255, 255, 255, 0) 43%, rgb(255, 255, 255) 100%);
 }
+.displayTheme.comp_wide {
+  overflow: hidden;
+}
 .displayTheme.comp_wide .comp_body.layer_up .text_area {
   margin-top: 7rem;
 }
@@ -2020,6 +2023,7 @@
   }
 }
 .displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper {
+  overflow: visible;
   width: 100%;
   padding: 0 10rem;
 }
@@ -2027,11 +2031,11 @@
   content: "";
   display: block;
   position: absolute;
-  top: 0;
+  top: -4rem;
+  bottom: -4rem;
   left: 0;
   z-index: 2;
   width: 10rem;
-  height: 100%;
   background: rgb(0, 0, 0);
   background: linear-gradient(270deg, rgba(0, 0, 0, 0) 43%, rgb(0, 0, 0) 100%);
 }
@@ -2541,4 +2545,42 @@
 .inCarGame .inCarGameDtlThumb .swiper-slide.swiper-slide-thumb-active:after {
   display: none;
 }
+
+.tooltip {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: -8.5rem;
+  left: 0;
+  z-index: 10;
+  width: 27.6rem;
+  height: 7.2rem;
+  padding: 0 0 0 1.6rem;
+  font-size: 1.2rem;
+  color: #05141F;
+  line-height: 2rem;
+  border: 1px solid #000;
+  border-radius: 0.4rem;
+  background-color: #fff;
+}
+.tooltip:after {
+  content: "";
+  display: block;
+  position: absolute;
+  bottom: -0.9rem;
+  left: 2.4rem;
+  width: 1.5rem;
+  height: 0.9rem;
+  background: url("../images/kia/pdp/display_theme/ico_edge.png") no-repeat center/contain;
+}
+.tooltip .btn-close {
+  position: absolute;
+  top: 1.6rem;
+  right: 1.6rem;
+  width: 1.6rem;
+  height: 1.6rem;
+  background: url("../images/kia/pdp/display_theme/ico_close.png") no-repeat center/contain;
+  text-indent: -9999em;
+  cursor: pointer;
+}
 /*# sourceMappingURL=pdp_detail.css.map */

assets/css/pdp_detail.scss

@@ -1872,6 +1872,7 @@
     }
 
     &.comp_wide {
+        overflow: hidden;
         .comp_body {
             &.layer_up {
                 .text_area {
@@ -1921,17 +1922,18 @@
                     padding:2.5rem 0;
                 }
                 .swiper {
+                    overflow: visible;
                     width: 100%;
                     padding:0 10rem;
                     &:before,&:after {
                         content:"";
                         display: block;
                         position: absolute;
-                        top:0;
+                        top:-4rem;
+                        bottom:-4rem;
                         left:0;
                         z-index: 2;
                         width: 10rem;
-                        height: 100%;
                         background: rgb(0,0,0);
                         background: linear-gradient(270deg, rgba(0,0,0,0) 43%, rgba(0,0,0,1) 100%);
                     }
@@ -2431,9 +2433,42 @@
                 }
             }
         }
-    }
-
-    
-
-    
+    }    
 }
+    .tooltip {
+        display: flex;
+        align-items: center;
+        position: absolute;
+        top:-8.5rem;
+        left:0;
+        z-index: 10;
+        width: 27.6rem;
+        height: 7.2rem;
+        padding:0 0 0 1.6rem;
+        font-size: 1.2rem;
+        color:#05141F;
+        line-height: 2rem;
+        border:1px solid #000;
+        border-radius: .4rem;
+        background-color: #fff;
+        &:after {
+            content:"";
+            display: block;
+            position: absolute;
+            bottom: -0.9rem;
+            left: 2.4rem;
+            width: 1.5rem;
+            height: .9rem;
+            background: url("../images/kia/pdp/display_theme/ico_edge.png") no-repeat center / contain;
+        }
+        .btn-close {
+            position: absolute;
+            top: 1.6rem;
+            right: 1.6rem;
+            width: 1.6rem;
+            height: 1.6rem;
+            background: url("../images/kia/pdp/display_theme/ico_close.png") no-repeat center / contain;
+            text-indent: -9999em;
+            cursor: pointer;
+        }
+    }

assets/js/common.js

@@ -334,10 +334,10 @@ function pdpDisplayThemeSwiper(){
         var swiperTheme = new Swiper(".pdpDisplayThemeSwiper", {
             slidesPerView: "auto",
             loop:true,  
-            freeMode: true,
+            freeMode: false,
             autoplay: {
-                delay:1,
-                disableOnInteraction: true,
+                delay:0,
+                disableOnInteraction: false,
             },
             speed: 3000,
             breakpoints: {
@@ -363,16 +363,33 @@ function pdpDisplayThemeSwiper(){
             },
         });
         
+        
     
         $('.pdpDisplayThemeSwiper').hover(function(){
+            console.log('flagAutoPlay1 ==== ', flagAutoPlay);
             if(flagAutoPlay==true){
+                console.log('flagAutoPlay2 ==== ', flagAutoPlay);
                 swiperTheme.autoplay.stop();
             }
         }, function(){
+            console.log('flagAutoPlay3 ==== ', flagAutoPlay);
             if(flagAutoPlay==true){
                 swiperTheme.autoplay.start();
             }
         });
+
+        swiperTheme.el.onclick = function() {
+            // 클릭 시 할 특별한 동작이 없더라도 이 핸들러를 설정해두면,
+            // 사용자의 클릭으로 인한 상호작용으로 자동 재생이 중단되는 것을 방지할 수 있습니다.
+        };
+
+        $('.displayTheme .dtthumb').hover(function(){
+            let leftPos = $(this).offset().left;
+            console.log();
+            $(this).append(`<div class="tooltip"><div class="msg">썸네일을 클릭하면 적용예시를 확인<br>할 수 있습니다.</div><button class="btn-close">x</button></div>`);
+        }, function(){
+            $('.displayTheme .tooltip').remove();
+        });
     }
     
     flagScroll = false;
@@ -398,7 +415,7 @@ function pdpInCarGameSwiper(){
             freeMode: true,
             autoplay: {
                 delay:1,
-                disableOnInteraction: true,
+                disableOnInteraction: false,
             },
             speed: 2400,
             breakpoints: {
@@ -526,7 +543,7 @@ $(document).on("click", ".displayTheme .dtthumb", function() {
 
     // $(".visualBg img").attr("src", `${visualBgPathWithoutFileName}/${dtlImgPath}_screen.jpg`);
 
-    flagAutoPlay = false;
+    // flagAutoPlay = false;
 });
 
 //마이페이지 lnb 스와이프