Streaming live at 10am (PST)

How do I call JSQuery on a container


#1

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.


#2

Answered my own question!