#1. First, add a Gallery Block Slideshow
and enable the option “Show Next and Previous Controls”
#2. Use code to Page Header Code Injection (page where you use slideshow)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(() => { const slides = $('.sqs-gallery-container.sqs-gallery-block-slideshow.sqs-gallery-has-controls') const arr = [] const ai=[] function move(i) { const imgs = $(slides[i]).find('.slide') for (let j=0;j<imgs.length; j++) { $(imgs[j]).attr('style', 'opacity: 0; z-index: 888; overflow: hidden;') $(imgs[j]).removeClass('sqs-active-slide') } const newi = arr[i] === imgs.length - 1 ? 0:arr[i]+1; arr[i]=newi; $(imgs[newi]).attr('style', 'opacity: 1; z-index: 889; overflow: hidden;') $(imgs[newi]).addClass('sqs-active-slide') } for (let i=0;i<slides.length; i++) { arr[i] = 0; $(slides[i]).hover(() => { console.log('hover') move(i); ai[i] = setInterval(() => { move(i) }, 3000) }, () => { clearInterval(ai[i]) ai[i]=undefined }); } }) </script> <style> .sqs-gallery-meta-container { opacity: 0; } </style>