Auto-scroll feature in Image Slider
Submitted by nikhil.fuge@gma... on Thu, 12/19/2024 - 04:09
Forums:
Can I request to add an auto-scroll setting to the Image Slider. Thanks
Can I request to add an auto-scroll setting to the Image Slider. Thanks
Navigation
Connect with H5P
About
H5P is a registered trademark of H5P Group
Privacy policy |
Copyright ©
2025
otacke
Thu, 12/19/2024 - 15:59
Permalink
The code for adding that
The code for adding that feature has been proposed 5 years ago (https://github.com/falcon-git/h5p-image-slider/pull/3) and has not made it into the content type, unfortunately. :-/
I applied my own override on https://snordian.de/ If you can add JavaScript to the page/post that holds the H5P content (e.g. pages/posts on WordPress in text mode editor), you can add
<script> (()=>{let e,t,r=()=>{window.clearTimeout(e),e=window.setTimeout(()=>{t.gotoSlide((t.currentSlideId+1)%t.imageSlides.length),r()},5e3)},i=()=>{let e=t.imageSlides[t.currentSlideId].$imageHolder?.get(0);if(!e||"pointer"===e.style.pointer)return;let r=t.imageSlides[t.currentSlideId].image?.extras?.metadata?.source;r&&(e.style.cursor="pointer")},a=i=>{i.addEventListener("click",e=>{if("IMG"===e.target.tagName){let i=t.imageSlides[t.currentSlideId].image?.extras?.metadata?.source;i&&window.open(i,"_blank");return}let a=["h5p-image-slider-progress-button","h5p-image-slider-button-background","h5p-image-slider-button-text"];a.some(t=>e.target.classList.contains(t))&&r()}),i.addEventListener("touchstart",()=>{window.clearTimeout(e)}),i.addEventListener("touchend",()=>{r()})},n=e=>{let t=e.querySelector(".h5p-image-slider-sr-only");t&&new MutationObserver(()=>{i()}).observe(t,{attributes:!0,childList:!0})},l=()=>{if(!window.H5P?.externalDispatcher)return;let e=[...document.querySelectorAll("iframe.h5p-iframe")];H5P.externalDispatcher.on("initialized",()=>{e.forEach(e=>{let t;try{t=e.contentWindow}catch(r){return}s(t)})})},s=e=>{if((t=e.H5P?.instances?.[0])?.libraryInfo?.machineName!=="H5P.ImageSlider"||t.isCustomized||!t.imageSlides.length)return;let l=t.$container.get(0);l&&(t.isCustomized=!0,i(),a(l),n(l),r())};if("loading"!==document.readyState){l();return}document.addEventListener("readystatechange",()=>{"interactive"===document.readyState&&l()})})(); </script>to the page code to get that functionality.
Best,
Oliver