Auto-scroll feature in Image Slider

Can I request to add an auto-scroll setting to the Image Slider. Thanks

0
0
Supporter votes Members of the Supporter Network can vote for feature requests. When the supporter network has generated sufficient funding for the top voted feature request it will normally be implemented and released. More about the H5P Supporter Network
otacke's picture

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