{"id":1507,"date":"2025-05-17T15:54:37","date_gmt":"2025-05-17T15:54:37","guid":{"rendered":"https:\/\/khaki-partridge-686409.hostingersite.com\/?page_id=1507"},"modified":"2025-05-18T15:52:51","modified_gmt":"2025-05-18T15:52:51","slug":"fitness-wellness","status":"publish","type":"page","link":"https:\/\/modernshopping.shop\/de\/fitness-wellness\/","title":{"rendered":"Fitness Wellness"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"1507\" class=\"elementor elementor-1507\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6e4f61e e-flex e-con-boxed e-con e-parent\" data-id=\"6e4f61e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1322325 elementor-widget elementor-widget-html\" data-id=\"1322325\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\" \/>\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n  <title>Smart Video Carousel<\/title>\r\n  <style>\r\n    .custom-carousel-wrapper {\r\n      position: relative;\r\n      width: 100%;\r\n      height: 500px;\r\n    }\r\n\r\n    .custom-video-container {\r\n      position: relative;\r\n      width: 100%;\r\n      height: calc(100% - 40px);\r\n      overflow: hidden;\r\n    }\r\n\r\n    .custom-video-item {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -50%);\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n      opacity: 0;\r\n      transition: opacity 1s ease-in-out;\r\n    }\r\n\r\n    .custom-video-item.active {\r\n      opacity: 1;\r\n      z-index: 1;\r\n    }\r\n\r\n    .custom-controls-container {\r\n      position: absolute;\r\n      bottom: 0;\r\n      left: 50%;\r\n      transform: translateX(-50%);\r\n      z-index: 2;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 20px;\r\n      padding: 10px 20px;\r\n      background-color: #fff;\r\n      width: 100%;\r\n      justify-content: center;\r\n      height: 40px;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    .custom-dots-container {\r\n      display: flex;\r\n      gap: 15px;\r\n    }\r\n\r\n    .custom-dot {\r\n      width: 10px;\r\n      height: 10px;\r\n      border-radius: 50%;\r\n      border: 0.5px solid #000;\r\n      background-color: transparent;\r\n      cursor: pointer;\r\n      transition: all 0.3s ease;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    .custom-dot.active {\r\n      background-color: #000;\r\n      border-color: #000;\r\n    }\r\n\r\n    .custom-dot:hover {\r\n      transform: scale(1.2);\r\n    }\r\n\r\n    .custom-play-pause-btn {\r\n      width: 15px;\r\n      height: 15px;\r\n      background-color: transparent !important;\r\n      border: none;\r\n      cursor: pointer;\r\n      padding: 0;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n    }\r\n\r\n    .custom-play-pause-btn svg {\r\n      width: 100%;\r\n      height: 100%;\r\n      fill: #000;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <div class=\"custom-carousel-wrapper\">\r\n    <div class=\"custom-video-container\">\r\n      <video class=\"custom-video-item\" autoplay muted playsinline loop>\r\n        <source src=\"https:\/\/modernshopping.shop\/wp-content\/uploads\/2025\/05\/home-wellness-background.mp4\">\r\n      <\/video>\r\n      \r\n            <video class=\"custom-video-item\" autoplay muted playsinline loop>\r\n        <source src=\"https:\/\/modernshopping.shop\/wp-content\/uploads\/2025\/05\/HD-1080p-7.2Mbps-24916955.mp4\">\r\n      <\/video>\r\n      \r\n    <\/div>\r\n\r\n    <div class=\"custom-controls-container\">\r\n      <div class=\"custom-dots-container\">\r\n        <div class=\"custom-dot active\" data-index=\"0\"><\/div>\r\n        <div class=\"custom-dot active\" data-index=\"1\"><\/div>\r\n      <\/div>\r\n      <button class=\"custom-play-pause-btn\" aria-label=\"Play\/Pause\">\r\n        <svg viewbox=\"0 0 24 24\">\r\n          <path id=\"pause-icon\" d=\"M14,19H18V5H14M6,19H10V5H6V19Z\"\/>\r\n          <path id=\"play-icon\" d=\"M8,5.14V19.14L19,12.14L8,5.14Z\" style=\"display:none\"\/>\r\n        <\/svg>\r\n      <\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    document.addEventListener('DOMContentLoaded', async () => {\r\n      const videos = document.querySelectorAll('.custom-video-item');\r\n      const dots = document.querySelectorAll('.custom-dot');\r\n      const playPauseBtn = document.querySelector('.custom-play-pause-btn');\r\n      const pauseIcon = document.getElementById('pause-icon');\r\n      const playIcon = document.getElementById('play-icon');\r\n\r\n      let currentIndex = 0;\r\n      let isPlaying = true;\r\n      let videoTimeout;\r\n\r\n      async function getDuration(video) {\r\n        return new Promise((resolve) => {\r\n          if (!isNaN(video.duration) && video.duration > 0) {\r\n            resolve(video.duration);\r\n          } else {\r\n            video.addEventListener('loadedmetadata', () => {\r\n              resolve(video.duration);\r\n            }, { once: true });\r\n          }\r\n        });\r\n      }\r\n\r\n      async function scheduleNextVideo() {\r\n        clearTimeout(videoTimeout);\r\n        const currentVideo = videos[currentIndex];\r\n        const duration = await getDuration(currentVideo);\r\n\r\n        if (isPlaying && duration > 0) {\r\n          videoTimeout = setTimeout(() => {\r\n            switchVideo();\r\n          }, duration * 1000);\r\n        }\r\n      }\r\n\r\n      async function switchVideo(newIndex) {\r\n        const nextIndex = typeof newIndex === 'number' ? newIndex : (currentIndex + 1) % videos.length;\r\n\r\n        videos[currentIndex].classList.remove('active');\r\n        dots[currentIndex].classList.remove('active');\r\n        videos[currentIndex].pause();\r\n\r\n        currentIndex = nextIndex;\r\n        videos[currentIndex].classList.add('active');\r\n        dots[currentIndex].classList.add('active');\r\n        videos[currentIndex].currentTime = 0;\r\n\r\n        if (isPlaying) {\r\n          videos[currentIndex].play();\r\n          scheduleNextVideo();\r\n        }\r\n      }\r\n\r\n      function togglePlayPause() {\r\n        isPlaying = !isPlaying;\r\n        if (isPlaying) {\r\n          videos[currentIndex].play();\r\n          scheduleNextVideo();\r\n          pauseIcon.style.display = 'block';\r\n          playIcon.style.display = 'none';\r\n        } else {\r\n          videos[currentIndex].pause();\r\n          clearTimeout(videoTimeout);\r\n          pauseIcon.style.display = 'none';\r\n          playIcon.style.display = 'block';\r\n        }\r\n      }\r\n\r\n      async function init() {\r\n        videos.forEach(v => {\r\n          v.muted = true;\r\n          v.setAttribute('playsinline', '');\r\n        });\r\n\r\n        videos[currentIndex].classList.add('active');\r\n        dots[currentIndex].classList.add('active');\r\n\r\n        await getDuration(videos[currentIndex]);\r\n        videos[currentIndex].play();\r\n        scheduleNextVideo();\r\n      }\r\n\r\n      dots.forEach(dot => {\r\n        dot.addEventListener('click', function () {\r\n          const dotIndex = parseInt(this.getAttribute('data-index'));\r\n          if (dotIndex !== currentIndex) {\r\n            switchVideo(dotIndex);\r\n          }\r\n        });\r\n      });\r\n\r\n      playPauseBtn.addEventListener('click', togglePlayPause);\r\n\r\n      const wrapper = document.querySelector('.custom-carousel-wrapper');\r\n      wrapper.addEventListener('mouseenter', () => {\r\n        if (isPlaying) clearTimeout(videoTimeout);\r\n      });\r\n      wrapper.addEventListener('mouseleave', () => {\r\n        if (isPlaying) scheduleNextVideo();\r\n      });\r\n\r\n      await init();\r\n    });\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-dacde59 e-flex e-con-boxed e-con e-parent\" data-id=\"dacde59\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-52b06a6 elementor-widget elementor-widget-heading\" data-id=\"52b06a6\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Add Your Heading Text Here<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-217d128 elementor-widget elementor-widget-shortcode\" data-id=\"217d128\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div class=\"woocommerce columns-4\"><\/div><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-957c57d e-flex e-con-boxed e-con e-parent\" data-id=\"957c57d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-72c38bf elementor-widget elementor-widget-image\" data-id=\"72c38bf\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1480\" height=\"570\" src=\"https:\/\/modernshopping.shop\/wp-content\/uploads\/2025\/05\/footer_card_bg_00010001.webp\" class=\"attachment-full size-full wp-image-1602 wvs-archive-product-image\" alt=\"\" srcset=\"https:\/\/modernshopping.shop\/wp-content\/uploads\/2025\/05\/footer_card_bg_00010001.webp 1480w, https:\/\/modernshopping.shop\/wp-content\/uploads\/2025\/05\/footer_card_bg_00010001-300x116.webp 300w, https:\/\/modernshopping.shop\/wp-content\/uploads\/2025\/05\/footer_card_bg_00010001-1024x394.webp 1024w, https:\/\/modernshopping.shop\/wp-content\/uploads\/2025\/05\/footer_card_bg_00010001-768x296.webp 768w, https:\/\/modernshopping.shop\/wp-content\/uploads\/2025\/05\/footer_card_bg_00010001-110x42.webp 110w, https:\/\/modernshopping.shop\/wp-content\/uploads\/2025\/05\/footer_card_bg_00010001-60x23.webp 60w, https:\/\/modernshopping.shop\/wp-content\/uploads\/2025\/05\/footer_card_bg_00010001-600x231.webp 600w\" sizes=\"auto, (max-width: 1480px) 100vw, 1480px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Smart Video Carousel Add Your Heading Text Here<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1507","page","type-page","status-publish","hentry"],"acf":[],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/modernshopping.shop\/de\/wp-json\/wp\/v2\/pages\/1507","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/modernshopping.shop\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/modernshopping.shop\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/modernshopping.shop\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/modernshopping.shop\/de\/wp-json\/wp\/v2\/comments?post=1507"}],"version-history":[{"count":37,"href":"https:\/\/modernshopping.shop\/de\/wp-json\/wp\/v2\/pages\/1507\/revisions"}],"predecessor-version":[{"id":1653,"href":"https:\/\/modernshopping.shop\/de\/wp-json\/wp\/v2\/pages\/1507\/revisions\/1653"}],"wp:attachment":[{"href":"https:\/\/modernshopping.shop\/de\/wp-json\/wp\/v2\/media?parent=1507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}