Scroll through array of images by hovering your pointer over the cyan scrub bar.

pointerSlides.js

function setStyle(el,prop,val,pat){
	pat=(typeof(pat)==='undefined')?new RegExp(`(?<=(^\\s*|;\\s*))${prop}\\s*\:\\s*[^;]*;?`):new RegExp(pat);
	let c=el.style.cssText;
	let cs=[...c];
	let p=c.match(pat);
	let nv=`${prop}: ${val} !important;`;
	if(p===null){
		let sc=(c.trim().endsWith(';'))?'':';';
		el.style.cssText+=sc+nv;
	}else if(p[0]!==nv){
		let px=p.index;
		for(let i=px+1, z=px+p[0].length; i<z; ++i){
			cs[i]='';
		}
		cs[px]=nv;
		el.style.cssText=cs.join('');
	}
}
	
function absBoundingClientRect(el){
	let st = [window?.scrollY,
					window?.pageYOffset,
					el?.ownerDocument?.documentElement?.scrollTop,
					document?.documentElement?.scrollTop,
					document?.body?.parentNode?.scrollTop,
					document?.body?.scrollTop,
					document?.head?.scrollTop];
					
		let sl = [window?.scrollX,
						window?.pageXOffset,
						el?.ownerDocument?.documentElement?.scrollLeft,
						document?.documentElement?.scrollLeft,
						document?.body?.parentNode?.scrollLeft,
						document?.body?.scrollLeft,
						document?.head?.scrollLeft];
						
				let scrollTop=0;
				for(let k=0; k<st.length; k++){
					if(!!st[k] && typeof  st[k] !=='undefined' && st[k]>0){
						scrollTop=(st[k]>scrollTop)?st[k]:scrollTop;
					}
				}			

				let scrollLeft=0;
				for(let k=0; k<sl.length; k++){
					if(!!sl[k] && typeof  sl[k] !=='undefined' && sl[k]>0){
						scrollLeft=(sl[k]>scrollLeft)?sl[k]:scrollLeft;
					}
				}
	
	const rct=el.getBoundingClientRect();
	let r={};

	r.left=rct.left+scrollLeft;
	r.right=rct.right+scrollLeft;
	r.top=rct.top+scrollTop;
	r.bottom=rct.bottom+scrollTop;
	r.height=rct.height;
	r.width=rct.width;
	
	return r;
}

let pointerSlides={};
pointerSlides.setVis=(e,n)=>{
	
	function setPix(pixels, x, y, r, g, b, a, width) {
		let index = 4 * (x + y * width);
		pixels[index] = r;
		pixels[index+1] = g;
		pixels[index+2] = b;
		pixels[index+3] =a;
	}
	
	let psc=pointerSlides.canvas;
	let canvasHeight=psc.height;
	let canvasWidth=psc.width;
	let ctx = psc.getContext('2d', {willReadFrequently: true});
	ctx.globalCompositeOperation = "source-over";
	let iData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
	let pixels = iData.data;
	
	let l=pointerSlides.imgs.length;
	let rct=absBoundingClientRect(psc);
	let pv=e.offsetX/rct.width;
	let i=(typeof(n)!=='undefined')?n:Math.floor(pv*l);
	let z=i+1;
	psc.title=`Slide ${z}/${l}`;
	let xds=Math.ceil((i/l)*canvasWidth);
	let xdt=Math.floor((z/l)*canvasWidth);
	let psi=pointerSlides.imgs;
	let psdd=pointerSlides.default_disp;
	for(j=0; j<l; ++j){
		if(j!==i){
			setStyle(psi[j],'display','none');
		}else{
			setStyle(psi[j],'display',psdd[j]);
		}
	}
	
	for (let x=0; x<xds; ++x){
			for (let y=canvasHeight-1; y>=0; --y){
				setPix(pixels, x, y, 0,255,255,153, canvasWidth);
			}
	}
	for (let x=xds; x<=xdt; ++x){
			for (let y=canvasHeight-1; y>=0; --y){
				setPix(pixels, x, y, 255,0,0,153, canvasWidth);
			}
	}
	for (let x=xdt+1; x<canvasWidth; ++x){
			for (let y=canvasHeight-1; y>=0; --y){
				setPix(pixels, x, y, 0,255,255,153, canvasWidth);
			}
	}
	
	ctx.putImageData(iData, 0, 0);
	
};
pointerSlides.attach=function(imgs){
	pointerSlides.imgs=imgs;
	let psc=pointerSlides.canvas;
	if(typeof(psc)==='undefined'){
		pointerSlides.canvas=document.createElement('CANVAS');
		psc=pointerSlides.canvas;
		psc.style.cssText="all: initial !important; transition: none !important; display: block !important; position: absolute !important;  top: 0px !important;  left: 0px !important; transform-origin: top left !important; background: #00ffff99 !important; z-index: "+(Number.MAX_SAFE_INTEGER)+" !important; width: -webkit-fill-available !important;";
		//psc.height=pointerScrub_var*window.screen.height;
		psc.title="Hover over to scrub through";
		
		psc.onpointerenter=(e)=>{pointerSlides.setVis(e);};
		psc.onpointermove=(e)=>{pointerSlides.setVis(e);};
		psc.onpointerleave=(e)=>{pointerSlides.setVis(e,0);};
	
		document.body.insertAdjacentElement('beforeend',psc);
	}
	
	pointerSlides.default_disp=imgs.map((g)=>{
			let d=window.getComputedStyle(g)['display'];
			return ( (d==='none')?'initial':d );
	});

	for(i=1, len=imgs.length; i<len; ++i){
		setStyle(imgs[i],'display','none');
	}
	
	let r=absBoundingClientRect(imgs[0]);
	let z=parseFloat(window.getComputedStyle(imgs[0])['zoom']);

	setStyle(psc,'top',((r.top+imgs[0].naturalHeight*z)+5)+'px');
	psc.height=0.05*window.screen.height;
	psc.width=parseInt((window.getComputedStyle(psc)['width']));
	setStyle(psc,'width','');
	
}
	//let imgs=; // get array of images
	pointerSlides.attach(imgs);