Before / After Slider

(Andrew Eio) #1 (513.1 KB)
Hi All,

I am a designer, not a programmer, therefore this request for some guidance from all the more experienced hype programmers.

I have found a javascript “before/after” slider in html5 that uses javascript to allow the user to scrub left and right to reveal between the two images, which is available here.

I am trying to get this working within a Hype environment.

I have tried two routes, the first was to try and rebuild in hype by adding the assets (css/js) into the resources folder then building with the src="${resourcesFolderName}/ links for the header links. Then inserted a HTML Widget and added the body html again with the src="${resourcesFolderName}/imagename.png but this failed to work.

I then thought of using an HTML Widget with an iframe which links to the external url and this works fine, but I need for this to work locally offline. So I tried to link to the html within the resources file but breaks the file, and looking at the browser debug all the linked files (css/js) seem to be broken.

I have attached a file to help explain what I am trying to achieve, and link to the working slider (by iframe)

Can anyone offer some ideas on how to make this work.

Thanks in advance,



Maybe this thread will help you?: Responsive reveal of a picture

(Andrew Eio) #3


Many thanks for your prompt reply and link to exactly what I am looking for