Second Javascript File Not Working

JavaScript
1

Hello, everyone! I am working on a platform where I do not have access to the javascript files but I can add my own. I have the jQuery working in CodePen but when I upload it to the platform it is not working.

I know it doesn’t have anything to do with the upload itself because I have uploaded other files (created by other people) and they are working fine. So it must be something that I am missing in my code.

The file that works has the code surrounded by the following

(function($){

  $.fn.twentytwenty = function(options) {
    var options = $.extend({default_offset_pct: 0.5, orientation: 'horizontal'}, options);
    return this.each(function() {
           //a bunch of code here //
    };
})(jQuery);

I don’t have my code wrapped in anything, so I am assuming it is because of this. However, I don’t know what any of this code means and when I try to add it in CodePen, it stops all my other code from working.

Any help would be greatly appreciated, I am a complete beginner when it comes to Javascript.

2

Here is a link to my code in CodePen https://codepen.io/rbunz08/pen/VOXgEX

3

Bonus Question: I have the arrows pulsing when the mouse hovers over them. However, how do I get it to stop pulsing when they are clicked?

4

I definitely would have coded this whole thing differently., but to answer your question this is how:

 afterImg.addClass("rebeccagrace-after");
  
    slider.addClass('pulse-ability');   <---- added

    // 'Active' Variable to tell us when the slider is being used
    let active = false;

    // Listen for Clicks on the Handle
    document
      .querySelector(".rebeccagrace-slider")
      .addEventListener("mousedown", function() {
      $(this).removeClass('pulse-ability');    <---- added
      active = true;
    });

.pulse-ability:hover {   <---- changed
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}