Hover Slideshow – Change Image

#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>