I’ve found a great tool that I would like to use for a clients website, to show a before and after of teeth using a slider.
It’s the TwentyTwenty tool from Zurb, HERE
The instructions say:
It’s easy to get started, just wrap two images inside of a container. The first image will be on the left and the second one will be on the right. Here’s an example container:
<div id='container1' class='twentytwenty-container'>
<img src='sample-before.png'>
<img src='sample-after.png'>
</div>
I get that (I think). Set up the div on webflow. Give it an ID (not the class) as container 1. The class name stops a FOUC.
Then call twentytwenty() on this container once the images have loaded:
$(window).load(function() {
$("#container1").twentytwenty();
});
And Viola!
So how or where do I put that last bit of code? In the /before section? And do I need anything else to make this work?
As always, any help is very appreciated. I don’t have a share link as I haven’t set anything up yet.