{"id":611,"date":"2026-02-27T03:27:54","date_gmt":"2026-02-27T03:27:54","guid":{"rendered":"https:\/\/hithotprodcut.com\/?page_id=611"},"modified":"2026-02-28T05:06:41","modified_gmt":"2026-02-28T05:06:41","slug":"example","status":"publish","type":"page","link":"https:\/\/hithotprodcut.com\/index.php\/example\/","title":{"rendered":"example"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n ultra \u00b7 4\u2011image slider + search & cart<\/title>\r\n <!-- Google Fonts & Font Awesome 6 -->\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;600;800;900&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\r\n <style>\r\n \/* same base styles as before, plus new header additions *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Poppins', sans-serif;\r\n }\r\n\r\n body {\r\n background: linear-gradient(145deg, #ff7a00, #ff9d2f);\r\n overflow-x: hidden;\r\n transition: background 0.6s cubic-bezier(0.23, 1, 0.32, 1);\r\n min-height: 100vh;\r\n }\r\n\r\n \/* --- LIQUID BACKGROUND (unchanged) --- *\/\r\n .liquid {\r\n position: fixed;\r\n width: 100%;\r\n height: 100%;\r\n top: 0;\r\n left: 0;\r\n z-index: 0;\r\n pointer-events: none;\r\n }\r\n .blob {\r\n position: absolute;\r\n background: radial-gradient(circle at 30% 30%, rgba(255, 180, 70, 0.7), rgba(255, 100, 0, 0.5));\r\n border-radius: 60% 40% 50% 50%;\r\n filter: blur(70px);\r\n animation: morphBlob 16s infinite alternate ease-in-out;\r\n }\r\n .blob1 { width: 700px; height: 700px; top: -200px; right: -150px; background: radial-gradient(circle, #ffb347, #ff5500); animation-duration: 18s; }\r\n .blob2 { width: 500px; height: 500px; bottom: -150px; left: -100px; background: radial-gradient(circle, #ffaa33, #ff7700); filter: blur(90px); animation: morphBlob 20s reverse infinite; }\r\n .blob3 { width: 400px; height: 400px; top: 30%; left: 20%; background: radial-gradient(circle, #ffaa00, #ff8800); filter: blur(80px); animation: morphBlob 14s infinite alternate; }\r\n @keyframes morphBlob {\r\n 0% { border-radius: 60% 40% 50% 50%; transform: translate(0, 0) scale(1); }\r\n 25% { border-radius: 40% 60% 40% 60%; transform: translate(30px, -20px) scale(1.1); }\r\n 50% { border-radius: 50% 50% 60% 40%; transform: translate(-20px, 30px) scale(1.2); }\r\n 75% { border-radius: 60% 40% 50% 50%; transform: translate(20px, -30px) scale(1.05); }\r\n 100% { border-radius: 40% 60% 50% 50%; transform: translate(-30px, 20px) scale(1); }\r\n }\r\n\r\n \/* --- HEADER WITH SEARCH & CART (UPDATED) --- *\/\r\n header {\r\n position: absolute;\r\n width: 100%;\r\n padding: 18px 8%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: rgba(255, 255, 255, 0.08);\r\n backdrop-filter: blur(20px);\r\n -webkit-backdrop-filter: blur(20px);\r\n border-bottom: 1px solid rgba(255,255,255,0.2);\r\n z-index: 100;\r\n gap: 20px;\r\n }\r\n\r\n .logo {\r\n color: #fff;\r\n font-weight: 900;\r\n font-size: 26px;\r\n letter-spacing: 2px;\r\n text-shadow: 0 5px 20px rgba(0,0,0,0.2);\r\n white-space: nowrap;\r\n }\r\n .logo i {\r\n margin-right: 6px;\r\n font-size: 28px;\r\n }\r\n\r\n \/* search bar (middle) *\/\r\n .search-wrapper {\r\n flex: 1;\r\n max-width: 360px;\r\n margin: 0 10px;\r\n }\r\n .search-box {\r\n display: flex;\r\n align-items: center;\r\n background: rgba(255,255,255,0.15);\r\n border-radius: 50px;\r\n padding: 6px 6px 6px 18px;\r\n backdrop-filter: blur(5px);\r\n border: 1px solid rgba(255,255,255,0.25);\r\n transition: 0.2s;\r\n }\r\n .search-box:hover, .search-box:focus-within {\r\n background: rgba(255,255,255,0.25);\r\n border-color: rgba(255,255,255,0.5);\r\n }\r\n .search-box i {\r\n color: rgba(255,255,255,0.8);\r\n font-size: 16px;\r\n }\r\n .search-box input {\r\n background: transparent;\r\n border: none;\r\n padding: 10px 10px 10px 12px;\r\n width: 100%;\r\n color: white;\r\n font-size: 15px;\r\n outline: none;\r\n }\r\n .search-box input::placeholder {\r\n color: rgba(255,255,255,0.7);\r\n font-weight: 300;\r\n }\r\n .search-box button {\r\n background: white;\r\n border: none;\r\n border-radius: 50px;\r\n padding: 8px 18px;\r\n font-weight: 600;\r\n color: #ff7a00;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n white-space: nowrap;\r\n font-size: 14px;\r\n }\r\n .search-box button:hover {\r\n background: #ffeedd;\r\n transform: scale(1.02);\r\n }\r\n\r\n \/* right icons: cart + nav *\/\r\n .header-actions {\r\n display: flex;\r\n align-items: center;\r\n gap: 30px;\r\n }\r\n .cart-icon {\r\n color: white;\r\n font-size: 24px;\r\n position: relative;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n }\r\n .cart-icon:hover {\r\n transform: scale(1.1);\r\n color: #fff6e5;\r\n }\r\n .cart-icon span {\r\n position: absolute;\r\n top: -8px;\r\n right: -10px;\r\n background: #ff5500;\r\n color: white;\r\n font-size: 11px;\r\n font-weight: 700;\r\n padding: 3px 6px;\r\n border-radius: 20px;\r\n border: 2px solid rgba(255,255,255,0.5);\r\n }\r\n\r\n nav ul {\r\n display: flex;\r\n gap: 32px;\r\n list-style: none;\r\n }\r\n nav a {\r\n color: #fff;\r\n text-decoration: none;\r\n font-weight: 500;\r\n font-size: 15px;\r\n transition: 0.25s;\r\n position: relative;\r\n letter-spacing: 0.5px;\r\n white-space: nowrap;\r\n }\r\n nav a::after {\r\n content: '';\r\n position: absolute;\r\n width: 0;\r\n height: 2px;\r\n bottom: -6px;\r\n left: 0;\r\n background: #fff;\r\n transition: 0.3s;\r\n }\r\n nav a:hover::after {\r\n width: 100%;\r\n }\r\n\r\n \/* --- HERO SECTION (mostly unchanged, but slider now uses images) --- *\/\r\n .hero {\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 0 8%;\r\n position: relative;\r\n z-index: 10;\r\n gap: 40px;\r\n }\r\n\r\n \/* left glass card (unchanged) *\/\r\n .glass-card {\r\n background: rgba(255, 255, 255, 0.1);\r\n backdrop-filter: blur(18px);\r\n -webkit-backdrop-filter: blur(18px);\r\n border-radius: 40px;\r\n padding: 50px 45px;\r\n color: #fff;\r\n max-width: 540px;\r\n border: 1px solid rgba(255,255,255,0.3);\r\n box-shadow: 0 30px 50px rgba(0,0,0,0.2), inset 0 1px 3px rgba(255,255,255,0.5);\r\n animation: slideUp 1s ease-out;\r\n }\r\n @keyframes slideUp {\r\n 0% { opacity: 0; transform: translateY(60px); }\r\n 100% { opacity: 1; transform: translateY(0); }\r\n }\r\n .glass-card h1 { font-size: 64px; font-weight: 900; line-height: 1.0; margin-bottom: 10px; text-transform: uppercase; letter-spacing: -1px; text-shadow: 0 4px 20px rgba(0,0,0,0.2); }\r\n .badge { display: inline-block; background: rgba(255,255,255,0.25); backdrop-filter: blur(5px); padding: 6px 18px; border-radius: 40px; font-size: 14px; font-weight: 500; margin-bottom: 20px; border: 1px solid rgba(255,255,255,0.3); }\r\n .desc { font-size: 16px; margin: 20px 0 15px; opacity: 0.9; line-height: 1.6; max-width: 400px; }\r\n .specs { display: flex; gap: 25px; margin: 25px 0; }\r\n .spec-item { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.15); padding: 5px 16px; border-radius: 40px; border: 1px solid rgba(255,255,255,0.2); font-weight: 500; font-size: 15px; }\r\n .price-row { display: flex; align-items: center; gap: 30px; margin: 30px 0 20px; }\r\n .price { font-size: 42px; font-weight: 800; letter-spacing: -1px; }\r\n .price small { font-size: 16px; font-weight: 400; opacity: 0.7; }\r\n\r\n \/* color selector *\/\r\n .color-picker { margin: 25px 0; }\r\n .color-label { font-size: 14px; text-transform: uppercase; letter-spacing: 2px; opacity: 0.8; margin-bottom: 8px; }\r\n .color-dots { display: flex; gap: 18px; }\r\n .color-dot { width: 32px; height: 32px; border-radius: 50%; cursor: pointer; border: 3px solid rgba(255,255,255,0.6); transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }\r\n .color-dot:hover { transform: scale(1.3) rotate(8deg); border-color: white; box-shadow: 0 0 25px currentColor; }\r\n .color-dot.orange { background: #ff7a00; }\r\n .color-dot.blue { background: #1e6df2; }\r\n .color-dot.black { background: #222; }\r\n .color-dot.yellow { background: #ffd966; }\r\n\r\n \/* CTA button (unchanged) *\/\r\n .btn-wrapper { position: relative; display: inline-block; }\r\n .btn { padding: 16px 52px; border: none; border-radius: 60px; background: #fff; color: #1e1e1e; font-weight: 700; font-size: 18px; cursor: pointer; transition: all 0.3s; box-shadow: 0 10px 30px rgba(0,0,0,0.25); display: inline-flex; align-items: center; gap: 10px; position: relative; overflow: hidden; z-index: 1; }\r\n .btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 115, 0, 0.3); transform: translate(-50%, -50%); transition: width 0.5s, height 0.5s; z-index: -1; }\r\n .btn:hover::before { width: 300px; height: 300px; }\r\n .btn:hover { transform: scale(1.06) translateY(-3px); color: #ff5500; box-shadow: 0 22px 45px rgba(0,0,0,0.35); }\r\n .btn i { font-size: 22px; transition: 0.3s; }\r\n .btn:hover i { transform: translateX(6px); }\r\n\r\n \/* --- RIGHT SIDE: FOUR-IMAGE SLIDER (WITH <img> TAGS) --- *\/\r\n .product-area {\r\n position: relative;\r\n width: 500px;\r\n height: 500px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n perspective: 1500px;\r\n }\r\n\r\n .sound-ring {\r\n position: absolute;\r\n width: 360px;\r\n height: 360px;\r\n border-radius: 50%;\r\n border: 2px solid rgba(255,255,255,0.25);\r\n animation: soundPulse 3s infinite ease-out;\r\n box-shadow: 0 0 40px rgba(255,140,0,0.4);\r\n }\r\n .sound-ring2 {\r\n width: 440px;\r\n height: 440px;\r\n border: 2px dashed rgba(255,255,255,0.2);\r\n animation: soundPulse 4s infinite reverse;\r\n }\r\n @keyframes soundPulse {\r\n 0% { transform: scale(0.9); opacity: 0.8; }\r\n 100% { transform: scale(1.5); opacity: 0; }\r\n }\r\n\r\n .pedestal-glow {\r\n position: absolute;\r\n bottom: 60px;\r\n width: 380px;\r\n height: 50px;\r\n background: radial-gradient(circle, rgba(255,200,100,0.8), transparent);\r\n border-radius: 50%;\r\n filter: blur(28px);\r\n }\r\n\r\n \/* slider container (3D tilt target) *\/\r\n .slider-container {\r\n position: relative;\r\n width: 340px;\r\n height: 340px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: transform 0.1s ease-out;\r\n transform-style: preserve-3d;\r\n z-index: 20;\r\n }\r\n\r\n .slider-wrapper {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n .slide {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 0.5s ease, visibility 0.5s;\r\n }\r\n\r\n .slide.active {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n\r\n .slide img {\r\n max-width: 100%;\r\n max-height: 100%;\r\n object-fit: contain;\r\n filter: drop-shadow(0 30px 30px rgba(0,0,0,0.5));\r\n transition: filter 0.3s;\r\n }\r\n\r\n \/* navigation arrows *\/\r\n .slider-btn {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 44px;\r\n height: 44px;\r\n border-radius: 50%;\r\n background: rgba(255,255,255,0.25);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255,255,255,0.4);\r\n color: white;\r\n font-size: 22px;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: 0.2s;\r\n z-index: 30;\r\n }\r\n .slider-btn:hover {\r\n background: rgba(255,255,255,0.5);\r\n transform: translateY(-50%) scale(1.1);\r\n }\r\n .slider-btn.prev { left: -20px; }\r\n .slider-btn.next { right: -20px; }\r\n\r\n \/* dots indicator *\/\r\n .slider-dots {\r\n position: absolute;\r\n bottom: -35px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n display: flex;\r\n gap: 14px;\r\n z-index: 30;\r\n }\r\n .dot {\r\n width: 12px;\r\n height: 12px;\r\n border-radius: 50%;\r\n background: rgba(255,255,255,0.4);\r\n border: 1px solid rgba(255,255,255,0.6);\r\n cursor: pointer;\r\n transition: 0.2s;\r\n }\r\n .dot.active {\r\n background: white;\r\n transform: scale(1.4);\r\n box-shadow: 0 0 15px white;\r\n }\r\n\r\n \/* rating badge (unchanged) *\/\r\n .rating-float {\r\n position: absolute;\r\n top: 90px;\r\n right: 20px;\r\n background: rgba(255,255,255,0.2);\r\n backdrop-filter: blur(12px);\r\n padding: 10px 20px;\r\n border-radius: 60px;\r\n border: 1px solid rgba(255,255,255,0.3);\r\n color: white;\r\n font-weight: 600;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n z-index: 20;\r\n }\r\n .rating-float i {\r\n color: gold;\r\n animation: starTwinkle 1.8s infinite alternate;\r\n }\r\n @keyframes starTwinkle {\r\n 0% { opacity: 1; text-shadow: 0 0 5px gold; }\r\n 100% { opacity: 0.8; text-shadow: 0 0 15px orange; }\r\n }\r\n\r\n \/* responsive tweaks *\/\r\n @media (max-width: 1100px) {\r\n header { flex-wrap: wrap; }\r\n .search-wrapper { order: 3; max-width: 100%; margin-top: 10px; }\r\n .hero { flex-direction: column; text-align: center; padding: 160px 5% 60px; }\r\n .glass-card { padding: 35px; }\r\n .specs { justify-content: center; }\r\n .price-row { justify-content: center; }\r\n .color-dots { justify-content: center; }\r\n .product-area { margin-top: 30px; }\r\n .slider-btn.prev { left: 0; }\r\n .slider-btn.next { right: 0; }\r\n .rating-float { top: 140px; }\r\n }\r\n @media (max-width: 600px) {\r\n .glass-card h1 { font-size: 42px; }\r\n .slider-container { width: 260px; height: 260px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- LIQUID BACKGROUND -->\r\n <div class=\"liquid\">\r\n <div class=\"blob blob1\"><\/div>\r\n <div class=\"blob blob2\"><\/div>\r\n <div class=\"blob blob3\"><\/div>\r\n <\/div>\r\n\r\n <!-- HEADER WITH SEARCH & CART (UPDATED) -->\r\n <header>\r\n <div class=\"logo\"><i class=\"fas fa-headphones\"><\/i> SONICSPHERE<\/div>\r\n\r\n <!-- search bar -->\r\n <div class=\"search-wrapper\">\r\n <div class=\"search-box\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <input type=\"text\" placeholder=\"Search headphones...\">\r\n <button type=\"submit\">Go<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- right side: cart + navigation -->\r\n <div class=\"header-actions\">\r\n <div class=\"cart-icon\">\r\n <i class=\"fas fa-shopping-cart\"><\/i>\r\n <span>2<\/span> <!-- example cart count -->\r\n <\/div>\r\n <nav>\r\n <ul>\r\n <li><a href=\"#\">Store<\/a><\/li>\r\n <li><a href=\"#\">Series<\/a><\/li>\r\n <li><a href=\"#\">Support<\/a><\/li>\r\n <\/ul>\r\n <\/nav>\r\n <\/div>\r\n <\/header>\r\n\r\n <!-- RATING FLOAT -->\r\n <div class=\"rating-float\">\r\n <i class=\"fas fa-star\"><\/i> <span>4.9 (12k+ reviews)<\/span>\r\n <\/div>\r\n\r\n <!-- HERO SECTION -->\r\n <section class=\"hero\">\r\n <!-- LEFT GLASS CARD (unchanged) -->\r\n <div class=\"glass-card\">\r\n <span class=\"badge\"><i class=\"fas fa-bolt\"><\/i> limited edition \u00b7 immersive audio<\/span>\r\n <h1>SOUND<br>ELEVATED<\/h1>\r\n <div class=\"desc\">\r\n Ultra\u2011premium wireless headphones with adaptive noise cancellation, spatial audio, and 40h battery.\r\n <\/div>\r\n <div class=\"specs\">\r\n <div class=\"spec-item\"><i class=\"fas fa-battery-full\"><\/i> 40h<\/div>\r\n <div class=\"spec-item\"><i class=\"fas fa-wifi\"><\/i> BT 5.4<\/div>\r\n <div class=\"spec-item\"><i class=\"fas fa-water\"><\/i> IPX5<\/div>\r\n <\/div>\r\n <div class=\"price-row\">\r\n <div class=\"price\"><small>$<\/small>279 <small>.99<\/small><\/div>\r\n <\/div>\r\n\r\n <!-- COLOR DOTS (control slider + background) -->\r\n <div class=\"color-picker\">\r\n <div class=\"color-label\">choose finish<\/div>\r\n <div class=\"color-dots\">\r\n <span class=\"color-dot orange\" data-color=\"orange\"><\/span>\r\n <span class=\"color-dot blue\" data-color=\"blue\"><\/span>\r\n <span class=\"color-dot black\" data-color=\"black\"><\/span>\r\n <span class=\"color-dot yellow\" data-color=\"yellow\"><\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- CTA BUTTON -->\r\n <div class=\"btn-wrapper\">\r\n <button class=\"btn\" id=\"shopBtn\"><span>Buy now<\/span> <i class=\"fas fa-arrow-right\"><\/i><\/button>\r\n <\/div>\r\n <p style=\"font-size: 12px; margin-top: 18px; opacity: 0.7;\"><i class=\"fas fa-truck\"><\/i> free express shipping \u00b7 2 year warranty<\/p>\r\n <\/div>\r\n\r\n <!-- RIGHT SIDE: FOUR-IMAGE SLIDER (WITH IMG TAGS) -->\r\n <div class=\"product-area\" id=\"productArea\">\r\n <div class=\"sound-ring\"><\/div>\r\n <div class=\"sound-ring sound-ring2\"><\/div>\r\n <div class=\"pedestal-glow\"><\/div>\r\n\r\n <!-- SLIDER CONTAINER (TILT TARGET) -->\r\n <div class=\"slider-container\" id=\"sliderContainer\">\r\n <div class=\"slider-wrapper\">\r\n <!-- four slides with images - REPLACE src URLs WITH YOUR WORKING LINKS -->\r\n <div class=\"slide active\" data-color=\"orange\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/image-removebg-preview-4.png\" alt=\"Orange Headphones\" onerror=\"this.src='https:\/\/via.placeholder.com\/300x300?text=Image+4'\">\r\n <\/div>\r\n <div class=\"slide\" data-color=\"blue\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/image-removebg-preview-3.png\" alt=\"Blue Headphones\" onerror=\"this.src='https:\/\/via.placeholder.com\/300x300?text=Image+3'\">\r\n <\/div>\r\n <div class=\"slide\" data-color=\"black\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/image-removebg-preview-2.png\" alt=\"Black Headphones\" onerror=\"this.src='https:\/\/via.placeholder.com\/300x300?text=Image+2'\">\r\n <\/div>\r\n <div class=\"slide\" data-color=\"yellow\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/image-removebg-preview-1.png\" alt=\"Yellow Headphones\" onerror=\"this.src='https:\/\/via.placeholder.com\/300x300?text=Image+1'\">\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- prev\/next arrows -->\r\n <button class=\"slider-btn prev\" id=\"prevSlide\"><i class=\"fas fa-chevron-left\"><\/i><\/button>\r\n <button class=\"slider-btn next\" id=\"nextSlide\"><i class=\"fas fa-chevron-right\"><\/i><\/button>\r\n\r\n <!-- dots indicator (populated by js) -->\r\n <div class=\"slider-dots\" id=\"sliderDots\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n (function() {\r\n \/\/ ---- SLIDER WITH IMAGES ----\r\n const slides = document.querySelectorAll('.slide');\r\n const prevBtn = document.getElementById('prevSlide');\r\n const nextBtn = document.getElementById('nextSlide');\r\n const dotsContainer = document.getElementById('sliderDots');\r\n const colorDots = document.querySelectorAll('.color-dot');\r\n const body = document.body;\r\n\r\n \/\/ gradient mapping for background\r\n const gradients = {\r\n orange: 'linear-gradient(145deg, #ff7a00, #ff9d2f)',\r\n blue: 'linear-gradient(145deg, #0066ff, #3b8cff)',\r\n black: 'linear-gradient(145deg, #2b2b2b, #4f4f4f)',\r\n yellow: 'linear-gradient(145deg, #f9d423, #fdaa33)'\r\n };\r\n\r\n let currentIndex = 0;\r\n\r\n \/\/ ---- initialize dots ----\r\n function updateDots() {\r\n let dotsHtml = '';\r\n slides.forEach((_, idx) => {\r\n dotsHtml += `<span class=\"dot ${idx === currentIndex ? 'active' : ''}\" data-index=\"${idx}\"><\/span>`;\r\n });\r\n dotsContainer.innerHTML = dotsHtml;\r\n\r\n document.querySelectorAll('.dot').forEach(dot => {\r\n dot.addEventListener('click', (e) => {\r\n const index = parseInt(e.target.dataset.index);\r\n goToSlide(index);\r\n });\r\n });\r\n }\r\n\r\n \/\/ ---- go to slide ----\r\n function goToSlide(index) {\r\n if (index < 0) index = slides.length - 1;\r\n if (index >= slides.length) index = 0;\r\n\r\n slides.forEach((slide, i) => {\r\n slide.classList.toggle('active', i === index);\r\n });\r\n\r\n currentIndex = index;\r\n updateDots();\r\n\r\n const activeColor = slides[index].dataset.color;\r\n body.style.background = gradients[activeColor] || gradients.orange;\r\n\r\n \/\/ highlight matching color dot\r\n colorDots.forEach(dot => {\r\n const dotColor = dot.dataset.color;\r\n if (dotColor === activeColor) {\r\n dot.style.transform = 'scale(1.3)';\r\n dot.style.borderColor = 'white';\r\n } else {\r\n dot.style.transform = 'scale(1)';\r\n dot.style.borderColor = 'rgba(255,255,255,0.6)';\r\n }\r\n });\r\n }\r\n\r\n \/\/ event listeners\r\n nextBtn.addEventListener('click', () => goToSlide(currentIndex + 1));\r\n prevBtn.addEventListener('click', () => goToSlide(currentIndex - 1));\r\n\r\n colorDots.forEach(dot => {\r\n dot.addEventListener('click', function() {\r\n const color = this.dataset.color;\r\n const targetIndex = { orange:0, blue:1, black:2, yellow:3 }[color] || 0;\r\n goToSlide(targetIndex);\r\n });\r\n });\r\n\r\n \/\/ ---- 3D tilt effect on slider container ----\r\n const sliderContainer = document.getElementById('sliderContainer');\r\n document.addEventListener('mousemove', (e) => {\r\n const x = (window.innerWidth \/ 2 - e.pageX) \/ 30;\r\n const y = (window.innerHeight \/ 2 - e.pageY) \/ 30;\r\n sliderContainer.style.transform = `rotateY(${x}deg) rotateX(${y}deg) scale(1.02)`;\r\n });\r\n document.addEventListener('mouseleave', () => {\r\n sliderContainer.style.transform = 'rotateY(0deg) rotateX(0deg) scale(1)';\r\n });\r\n\r\n \/\/ ---- shop button ripple (optional) ----\r\n const btn = document.getElementById('shopBtn');\r\n btn.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n const originalHTML = this.innerHTML;\r\n this.innerHTML = '<span>Added to cart<\/span> <i class=\"fas fa-check\"><\/i>';\r\n this.style.background = '#1e1e1e';\r\n this.style.color = '#fff';\r\n\r\n const ripple = document.createElement('span');\r\n ripple.style.position = 'absolute';\r\n ripple.style.background = 'rgba(255,255,255,0.6)';\r\n ripple.style.width = '10px';\r\n ripple.style.height = '10px';\r\n ripple.style.borderRadius = '50%';\r\n ripple.style.transform = 'translate(-50%, -50%)';\r\n ripple.style.pointerEvents = 'none';\r\n ripple.style.left = e.offsetX + 'px';\r\n ripple.style.top = e.offsetY + 'px';\r\n ripple.style.animation = 'ripple 0.6s ease-out';\r\n this.appendChild(ripple);\r\n\r\n setTimeout(() => {\r\n this.innerHTML = originalHTML;\r\n this.style.background = '#fff';\r\n this.style.color = '#1e1e1e';\r\n ripple.remove();\r\n }, 1800);\r\n });\r\n\r\n \/\/ add ripple keyframe if not exists\r\n if (!document.querySelector('#rippleStyle')) {\r\n const style = document.createElement('style');\r\n style.id = 'rippleStyle';\r\n style.innerHTML = `\r\n @keyframes ripple {\r\n 0% { width: 0; height: 0; opacity: 0.7; }\r\n 100% { width: 300px; height: 300px; opacity: 0; }\r\n }\r\n `;\r\n document.head.appendChild(style);\r\n }\r\n\r\n \/\/ initial slide\r\n goToSlide(0);\r\n\r\n \/\/ hover effect on product area (sound rings)\r\n const productArea = document.getElementById('productArea');\r\n productArea.addEventListener('mouseenter', () => {\r\n document.querySelector('.sound-ring').style.animationDuration = '1.8s';\r\n document.querySelector('.sound-ring2').style.animationDuration = '2.5s';\r\n });\r\n productArea.addEventListener('mouseleave', () => {\r\n document.querySelector('.sound-ring').style.animationDuration = '3s';\r\n document.querySelector('.sound-ring2').style.animationDuration = '4s';\r\n });\r\n })();\r\n <\/script>\r\n\r\n <!-- fallback if images fail to load, they show a colored placeholder -->\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>ultra \u00b7 4\u2011image slider + search & cart SONICSPHERE Go 2 Store Series Support 4.9 (12k+ reviews) limited edition \u00b7 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-611","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/pages\/611","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/comments?post=611"}],"version-history":[{"count":64,"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/pages\/611\/revisions"}],"predecessor-version":[{"id":687,"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/pages\/611\/revisions\/687"}],"wp:attachment":[{"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/media?parent=611"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}