image-comparison-slider.zip (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.
https://codyhouse.co/gem/css-jquery-image-comparison-slider/.
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,
Andrew