Jump to content

Trying to duplicate comparison slider to duplicate and appear side by side


Ryanfromhere
 Share

Recommended Posts

Here's the reference code:

https://www.w3schools.com/howto/howto_js_image_comparison.asp

I'd like to be able to get this to duplicate and have them appear side by side.  Putting the HTML code into tables doesn't work.  If I increase the size of the pictures they run over each other.  I think the issue is within the CSS.  Here's a sample of code:

.img-comp-img {
  position: absolute;
  width: auto;
  height: auto;
  overflow: hidden;

}

I was able to move the snowy mountain picture by copying the code, changing the element selector to ".img-comp", changing position to relative, and changing width to 300px.  After that I got stuck.

 

Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...