Trying to incorporate a before/after slider

Very new to website development. I’m trying to incorporate this jquery before/after slider into my website using the tutorial found here:
For the life of me, I can’t get it to work.

I’ve added all necessary files, changed most of the “obvious” things in the code. What I get is two pictures standing one on top of the other (the before and after pictures), without any sort of slider function offered.

Here are the things I did:

  1. In header.php added
<?= css('assets/css/twentytwenty.css') ?>
  1. In footer.php added
<?php echo js('assets/js/jquery.event.move.js') ?>
<?php echo js('assets/js/jquery.twentytwenty.js') ?>
  1. In article.php (subpage of blog.php), added this
<div class= "twentytwenty-wrapper">
<div id="before_after_images" class = "twentytwenty-container">
 <img class = "twentytwenty-before" src="images/image1.jpg">
<img class = "twentytwenty-after" src="images/image2.jpg">
</div><!-- end before_after_images -->
  1. In twentytwenty.js added
$(window).load(function() {

Sorry if this question is inappropriate. Thank you for any and all guidance

Well, this might be too obvious, but did you include jquery.js (before any jquery.* plugins)?

<script src=""></script>

Good question - I did that. Thanks for responding.

Any other suggestions, Kirby community?

You should not have added the code into twentytwenty.js. If you look at the examples that come with twentyywenty, your page should be set up like this.

    <script src="js/jquery.event.move.js"></script>
    <script src="js/jquery.twentytwenty.js"></script>
      $(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.7});
      $(".twentytwenty-container[data-orientation='vertical']").twentytwenty({default_offset_pct: 0.3, orientation: 'vertical'});

Compare the index.html file with your site, and you should be able to figure out where you have gone wrong.

Thank you for your input, jimbobrjames

I applied your suggestion, but it proved unsuccessful…at first.

Then what I did was change the

id = "before_after_images"


id = "container1"

I also changed the






and now it works…

Glad you got it going. In future, if you wrap your example code in 3 backticks in your posts…

it will be easier for people to read :slight_smile:
1 Like

Noted! Thank you :relaxed: