자동 재생 수정 / 툴팁 추가

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 스와이프