How do Some Websites Make Comparison Images with sliders Side By Side?

    Hello, this is TheTechBoy with a particular tutorial. Have you ever been reading a technology review, and seen a camera comparison and there was an image slider on the site? Some websites do that by using a website called JuxtaposeJS. A great feature of this website is that it is easy to use, and does not require an account. 

Step 1: Upload

    Upload your images to an image hosting service. Make sure the share settings are correct. Alternatively, you can upload them to Blogspot, and copy the image URL. Then paste the image URLs into JuxtaposeJS. The site is linked here. If you make it a GIF, you will not get a slider as it will slide automatically. If you decide to make a GIF, then you will get to download the GIF and not have to embed code.  

The screen that lets you upload the image links in JuxtaposeJS

Step 2: Edit

    Add image labels, and image credits in the respective text boxes. You can also change the slider position, choose to show the credits, and make the slider vertical. 

Buttons and text that says. Options Slider start position 1 %  Show Labels  Show Credits  Animate  Make Responsive  Vertical


Step 3: Generate 

    Click the publish button to generate the code for the image. If you are doing a medium post copy the first code and just copy and paste it into your post, just like you would copy and paste text. If you are using a different service, copy the second code, and change your editor to HTML mode. Then paste the code in. 

Big blue button that says publish

Step 4: Thanks

    Thank me in a comment telling me how much this meant to you. God Bless and Tech Talk To You Later!!!     

Post a Comment


Please make the comments constructive, and vulgarity will not be tolerated!

Post a Comment (0)
To Top