{"id":357,"date":"2023-08-29T11:02:43","date_gmt":"2023-08-29T10:02:43","guid":{"rendered":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/de\/?page_id=357"},"modified":"2023-11-07T15:15:52","modified_gmt":"2023-11-07T15:15:52","slug":"slider-test","status":"publish","type":"page","link":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/germany\/ashram-shree-peetha-nilaya\/slider-test\/","title":{"rendered":"Slider Test"},"content":{"rendered":"\n<section class=\"hero-media video-slider\">\n    <div class=\"hero-media__video hero-media__container\">\n        <div class=\"slide\">\n            <video class=\"lazy-video\" data-src=\"\/wp-content\/uploads\/sites\/5\/2023\/11\/Slide-1.mp4\" muted autoplay loop><\/video>\n        <\/div>\n        <div class=\"slide\">\n            <video class=\"lazy-video\" data-src=\"\/wp-content\/uploads\/sites\/5\/2023\/11\/Slide-2.mp4\" muted autoplay loop><\/video>\n        <\/div>\n        <div class=\"slide\">\n            <video class=\"lazy-video\" data-src=\"\/wp-content\/uploads\/sites\/5\/2023\/11\/Slide-3.mp4\" muted autoplay loop><\/video>\n        <\/div>\n        <div class=\"slide\">\n            <video class=\"lazy-video\" data-src=\"\/wp-content\/uploads\/sites\/5\/2023\/11\/Slide-2.mp4\" muted autoplay loop><\/video>\n        <\/div>\n        <div class=\"slide\">\n            <video class=\"lazy-video\" data-src=\"\/wp-content\/uploads\/sites\/5\/2023\/11\/Slide-1.mp4\" muted autoplay loop><\/video>\n        <\/div>\n    <\/div>\n    <div class=\"hero-media__content container\">\n        <h1>Be inspired to live your potential<\/h1>\n    <\/div>\n<\/section>\n\n<style>\n    .slide {\n        width: 100%;\n        height: 100%;\n        position: absolute;\n        top: 0;\n    }\n\n    .lazy-video {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n    }\n\n    @media (min-width: 768px) {\n        .video-slider {\n        }\n    }\n<\/style>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n    const slides = document.querySelectorAll(\".slide\");\n    let currentSlide = 0;\n    let slideChangeTimeout;\n\n    function loadVideo(index) {\n        const video = slides[index].querySelector(\".lazy-video\");\n        if (video && !video.src && video.dataset.src) {\n            video.src = video.dataset.src;\n            video.load(); \/\/ Preload the video\n        }\n    }\n\n    function playVideo(video) {\n        if (video) {\n            video.play().then(() => {\n                \/\/ Set timeout for the next slide based on the video duration\n                clearTimeout(slideChangeTimeout);\n                slideChangeTimeout = setTimeout(nextSlide, video.duration * 1000);\n            }).catch(e => {\n                console.error(\"Error playing video: \", e);\n                \/\/ Fallback: move to the next slide after a default interval in case of playback error\n                clearTimeout(slideChangeTimeout);\n                slideChangeTimeout = setTimeout(nextSlide, 5000);\n            });\n        }\n    }\n\n    function showSlide(index) {\n        if (slides[currentSlide]) {\n            slides[currentSlide].style.opacity = 0;\n        }\n        if (slides[index]) {\n            slides[index].style.opacity = 1;\n            currentSlide = index;\n            playVideo(slides[index].querySelector(\".lazy-video\"));\n        }\n    }\n\n    function nextSlide() {\n        const nextIndex = (currentSlide + 1) % slides.length;\n        loadVideo(nextIndex);\n        showSlide(nextIndex);\n    }\n\n    \/\/ Initialize the first video and slide\n    loadVideo(currentSlide);\n    showSlide(currentSlide);\n});\n\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Be inspired to live your potential<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":627,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"acf":[],"_links":{"self":[{"href":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/germany\/wp-json\/wp\/v2\/pages\/357"}],"collection":[{"href":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/germany\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/germany\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/germany\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/germany\/wp-json\/wp\/v2\/comments?post=357"}],"version-history":[{"count":76,"href":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/germany\/wp-json\/wp\/v2\/pages\/357\/revisions"}],"predecessor-version":[{"id":2068,"href":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/germany\/wp-json\/wp\/v2\/pages\/357\/revisions\/2068"}],"up":[{"embeddable":true,"href":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/germany\/wp-json\/wp\/v2\/pages\/627"}],"wp:attachment":[{"href":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/germany\/wp-json\/wp\/v2\/media?parent=357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}