{"product_id":"sphorika-popup-test","title":"sphorika-popup-test","description":"\u003clink rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.css\"\u003e\n\n\u003cstyle\u003e\n.custom-pagination .swiper-pagination-bullet-active::before{\n  background: #B4D6F4 !important;\n}\n  \n.swiper-pagination-bullet-active{\n   height:8px !important;\n  width:36px !important;\n  \n  background-color: white !important;\n}\n\n\n.slider-wrapper{\n    width:100%;\n    \/* max-width:1200px; *\/\n    margin:auto;\n}\n\n.my-custom-swiper{\n    width:100%;\n}\n\n.my-custom-swiper .swiper-slide{\n    height:500px;\n    border-radius:24px;\n    overflow:hidden;\n    transform:scale(.88);\n    transition:.4s;\n}\n\n.my-custom-swiper .swiper-slide-active{\n    transform:scale(1);\n}\n\n.my-custom-swiper .swiper-slide img{\n    width:100%;\n    height:100%;\n    object-fit:contain;\n    display:block;\n}\n\n\/* Controls *\/\n\n.slider-controls{\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    gap:18px;\n    margin-top:30px;\n}\n\n\/* Pagination *\/\n\n.custom-pagination{\n    position:relative !important;\n    width:auto !important;\n    left:auto !important;\n    bottom:auto !important;\n\n    display:flex !important;\n    align-items:center;\n    gap:12px;\n}\n\n\/* Normal Dots *\/\n\n.custom-pagination .swiper-pagination-bullet{\n    width:10px;\n    height:10px;\n    background:#444;\n    opacity:1;\n    margin:0 !important;\n    transition:.35s;\n    border-radius:50%;\n}\n\n\/* Active Pill *\/\n\n.custom-pagination .swiper-pagination-bullet-active{\n    width:42px;\n    height:10px;\n    border-radius:30px;\n    background:grey !important;\n    overflow:hidden;\n    position:relative;\n}\n\n\/* Loading Fill *\/\n\n.custom-pagination .swiper-pagination-bullet-active::before{\n    content:\"\";\n    position:absolute;\n    left:0;\n    top:0;\n    width:100%;\n    height:100%;\n    background:#0d6efd;\n    border-radius:30px;\n    transform-origin:left;\n    animation:loadingFill 3s linear forwards;\n}\n\n@keyframes loadingFill{\n    from{\n        transform:scaleX(0);\n    }\n    to{\n        transform:scaleX(1);\n    }\n}\n\n\/* Play Pause Button *\/\n\n#playPause{\n    width:42px;\n    height:42px;\n    border:none;\n    border-radius:50%;\n    background:#3b3b3f;\n    color:#fff;\n    cursor:pointer;\n    font-size:15px;\n\n    display:flex;\n    align-items:center;\n    justify-content:center;\n}\n\n\u003c\/style\u003e\n\n\n\u003cdiv class=\"slider-wrapper\"\u003e\n\n    \u003cdiv class=\"swiper my-custom-swiper\"\u003e\n\n        \u003cdiv class=\"swiper-wrapper\"\u003e\n\n            \u003cdiv class=\"swiper-slide\"\u003e\n                \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/USE-Case01-frost-web.webp?v=1780641587\"\u003e\n            \u003c\/div\u003e\n\n            \u003cdiv class=\"swiper-slide\"\u003e\n                \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/USE-Case02-frost-web.webp?v=1780641587\"\u003e\n            \u003c\/div\u003e\n\n            \u003cdiv class=\"swiper-slide\"\u003e\n                \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/USE-Case03-frost-web.webp?v=1780641586\"\u003e\n            \u003c\/div\u003e\n\n            \u003cdiv class=\"swiper-slide\"\u003e\n                \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/USE-Case04-frost-web.webp?v=1780641586\"\u003e\n            \u003c\/div\u003e\n\n           \u003cdiv class=\"swiper-slide\"\u003e\n                \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/USE-Case05-frost-web.webp?v=1780641587\"\u003e\n            \u003c\/div\u003e\n\n        \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"slider-controls\"\u003e\n\n        \u003cdiv class=\"custom-pagination\"\u003e\u003c\/div\u003e\n\n        \u003cbutton id=\"playPause\"\u003e❚❚\u003c\/button\u003e\n\n    \u003c\/div\u003e\n\n\u003c\/div\u003e\n\n\n\u003cscript src=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.js\"\u003e\u003c\/script\u003e\n\n\u003cscript\u003e\n\nconst AUTOPLAY_DELAY = 3000;\n\nconst swiper = new Swiper(\".my-custom-swiper\",{\n\n    loop:true,\n    centeredSlides:true,\n    slidesPerView:1.15,\n    spaceBetween:24,\n\n    autoplay:{\n        delay:AUTOPLAY_DELAY,\n        disableOnInteraction:false\n    },\n\n    pagination:{\n        el:\".custom-pagination\",\n        clickable:true\n    },\n\n    breakpoints:{\n        768:{\n            slidesPerView:1.4\n        },\n        1200:{\n            slidesPerView:1.7\n        }\n    }\n\n});\n\nconst playPauseBtn = document.getElementById(\"playPause\");\n\nlet isPlaying = true;\n\nplayPauseBtn.addEventListener(\"click\",()=\u003e{\n\n    if(isPlaying){\n\n        swiper.autoplay.stop();\n        playPauseBtn.innerHTML = \"▶️\";\n\n        document.querySelectorAll(\n            \".custom-pagination .swiper-pagination-bullet-active\"\n        ).forEach(el=\u003e{\n            el.style.setProperty(\"--play-state\",\"paused\");\n        });\n\n    }else{\n\n        swiper.autoplay.start();\n        playPauseBtn.innerHTML = \"❚❚\";\n\n        restartProgress();\n    }\n\n    isPlaying = !isPlaying;\n\n});\n\nfunction restartProgress(){\n\n    const activeBullet = document.querySelector(\n        \".custom-pagination .swiper-pagination-bullet-active\"\n    );\n\n    if(activeBullet){\n\n        activeBullet.classList.remove(\"restart\");\n\n        void activeBullet.offsetWidth;\n\n        activeBullet.classList.add(\"restart\");\n    }\n\n}\n\nswiper.on(\"slideChangeTransitionStart\",()=\u003e{\n\n    document\n    .querySelectorAll(\".custom-pagination .swiper-pagination-bullet\")\n    .forEach(bullet=\u003e{\n\n        bullet.style.animation=\"none\";\n\n        void bullet.offsetWidth;\n\n        bullet.style.animation=null;\n\n    });\n\n});\n\n\u003c\/script\u003e","brand":"ACwO","offers":[{"title":"Default Title","offer_id":53661301801278,"sku":null,"price":0.0,"currency_code":"INR","in_stock":false}],"url":"https:\/\/acwo.com\/products\/sphorika-popup-test","provider":"ACwO","version":"1.0","type":"link"}