디스플레이 테마 1차 업로드

assets/js/common.js

@@ -173,6 +173,28 @@ $(document).ready(function() {
         spaceBetween: 20,
         freeMode: true,
     }); 
+    //PDP Display Theme
+    var swiperTheme = new Swiper(".pdpDisplayThemeSwiper", {
+        slidesPerView: "auto",
+        loop:true,  
+        spaceBetween: 20,
+        freeMode: true,
+        autoplay: {
+            delay:1,
+            disableOnInteraction:false,
+        },
+        speed: 4000,
+
+    }); 
+    $('.pdpDisplayThemeSwiper').on('mouseleave', function() {
+        console.log("시작")
+        swiperTheme.autoplay.start();
+    });
+    
+    $('.pdpDisplayThemeSwiper').on('mouseenter', function() {
+        console.log("멈춰")
+        swiperTheme.autoplay.stop();
+    });
 
     //마이페이지 lnb 스와이프
 
@@ -403,3 +425,23 @@ $(document).on("click", ".lpthumb", function() {
     $(".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");
+
+    let imgHtml = `
+        <div class="image_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="200">
+            <img src="${dtlImgPath}-1.png" alt="디스플레이 테마1">
+        </div>
+        <div class="image_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="600">
+            <img src="${dtlImgPath}-2.png" alt="디스플레이 테마2">
+        </div>
+        <div class="image_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="1000">
+            <img src="${dtlImgPath}-3.png" alt="디스플레이 테마3">
+        </div>
+    `;
+    dtlImgs.html(imgHtml);
+});