If you would like to add in a before/after or comparison slider to your site, you now can with some custom code and the embed element! To see an example of how the slider works, take a look at our article where we partnered with Intel to reimagine classic TIME covers with AI.
Step 1: Add this code to the top of your master page in an un-iframed embed element
<script defer src="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/index.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/styles.css" />
<style>
img-comparison-slider .before,
img-comparison-slider .after {
margin: 0;
}
img-comparison-slider .before figcaption,
img-comparison-slider .after figcaption {
background: #000;
border-style: none;
border-radius: 2px;
color: #fff;
padding: 8px 10px;
position: absolute;
bottom: 5%;
font-size: 12px;
line-height: 1;
}
img-comparison-slider .before figcaption {
left: 12px;
}
img-comparison-slider .after figcaption {
right: 12px;
}
img-comparison-slider .img-comparison-handle {
border-radius: 50%;
border: 1px solid white;
transition: transform 0.2s;
transform: scale(1);
transform-origin: center;
width: 24px;
height: 24px;
padding: 6px;
}
img-comparison-slider {
cursor: col-resize;
}
img-comparison-slider:hover .img-comparison-handle {
transform: scale(1.2);
}
</style>
It will look like this in the embed element. Make sure that iframed is unchecked and you save changes. Once you've entered in this code, set the height of the embed element to 0px to hide it on the page.
Step 2: Add the slider embed code on the page where you want the slider to go
On your page, drag and drop an embed element to where you would like the slider to go. Paste the following code into the embed:
<img-comparison-slider>
<figure slot="first" class="before">
<img width="100%" src="url goes here">
<figcaption>Caption 1</figcaption>
</figure>
<figure slot="second" class="after">
<img width="100%" src="url goes here">
<figcaption>Caption 2</figcaption>
</figure>
<svg slot="handle" class="img-comparison-handle" viewBox="-3.7 -6 12 12" xmlns="http://www.w3.org/2000/svg">
<path stroke="#fff" d="M -0.589 -2 L -2.589 0 L -0.589 2 M -0.589 -2 L -0.589 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke-width="1" fill="#fff" vector-effect="non-scaling-stroke"/>
</svg>
</img-comparison-slider>
Where you replace Caption 1 and Caption 2 with the captions you'd like to place on the left and right respectively, or delete the entire line <figcaption>Caption 1</figcaption> if you do not want a caption.
To set the images used in the slider, make sure they are the same size and upload them to your media library. Once they are in the library, select them and click on the Copy Link button on the right hand side.
Take that link and then paste it into the code, replacing url goes here on the 3rd and 7th line of the code. It will look like this in the embed element:
Make sure that iframed is unchecked and the code is as colorful as the image above. If the code grays out that means that the code is broken. If this happens, the most likely reason is the opening and closing " around the image url having been accidentally removed.
Step 3: Resize the embed element to fit your content
Since the code needs to have iframed unchecked, you are unable to see a preview of the code in the app. To resize it properly, you will need to publish the site and check on the live site to make sure everything is showing properly. The code does scale well and works at all screen sizes, but you will need to manually make sure the size of the embed element resizes properly on smaller screens to not leave excess empty space.