Jump to content
Sign in to follow this  
Ryanfromhere

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

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.

 

Share this post


Link to post
Share on other sites

Hi there,

What do you mean by "Get this to Duplicate" and "have them appear side by side".

Do you want additional image comparers on the same line?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...