Homepage js is conflicting with js of plugin of other page

Question

I've downloaded Awesome Filterable Portfolio plugin , It was working fine.. but when I added a js file for scrolling carousel on home page, The js of that plugin stoped working..

I've added my cr-scroll.js file in functions.php as given below:

wp_register_script('java1', get_template_directory_uri() . '/js/cr-scroll.js', array( 'jquery' ));
wp_enqueue_script( 'java1' );

What I've Tried:

• $.noConflict();

• Replaced $ with jquery

• Wrap the code in

   (function($){
  
      $(document).ready(function(){
  
      });
  
   })(jQuery);
  

but nothing worked.

My js file is cr-scroll.js:

  (function($){
        $(document).ready(function($) {
         $.fn.make_carousel = function() {
            var speed = 0;
            var scroll = 0;
            var con = $(this);
            var con_w = con.width();
            var max_scroll = con[0].scrollWidth - con.outerWidth();
            var prev_frame = new Date().getTime();
            con.on('mousemove', function(e) {
                var mouse_x = e.pageX - con.offset().left;
                var mouseperc = 100 * mouse_x / con_w;
                speed = mouseperc - 50;
            }).on ( 'mouseleave', function() {
                speed = 0;});

            function updatescroll() {
                var cur_frame = new Date().getTime();
                var time_elapsed = cur_frame - prev_frame;
                prev_frame = cur_frame;
                if (speed !== 0) {
                    scroll += speed * time_elapsed / 50;
                    if (scroll < 0) scroll = 0;
                    if (scroll > max_scroll) scroll = max_scroll;
                    con.scrollLeft(scroll);
                }
                window.requestAnimationFrame(updatescroll);
            }
            window.requestAnimationFrame(updatescroll);
        }
        $("#carousel1").make_carousel();
        $("#carousel2").make_carousel();

        function reset(){
            $('.maincontent').find('*').removeAttr('class');
            document.getElementById('step1').setAttribute("class", "visible");
        }   
        function back(){
            var previous_class = $('.visible').data('previous');
            if(previous_class != ''){
                var current_class = $('.visible').attr('id');
                document.getElementById(current_class).setAttribute("class","");
                document.getElementById(previous_class).setAttribute("class","visible");
            }
        }
        function show_next(current,next) {
            document.getElementById(current).setAttribute("class", "hidden");
            document.getElementById(next).setAttribute("class", "visible");
        }
        
        function show_hide(show_ele,hide_ele) {
            document.getElementById(show_ele).style.display = "block";
            document.getElementById(hide_ele).style.display = "none";
        }
        function load_after_sec(id) {
            count = 0;
            wordsArray = ["5", "4", "3", "2", "1"];
            var timerID = setInterval(function () {
                count++;
                if(count == 5){
                    $("#"+id).show();
                    $("#seconds_counter").hide();
                    clearInterval(timerID);
                } else {
                    $("#num_sec").fadeOut(400, function () {
                        $(this).text(wordsArray[count % wordsArray.length]).fadeIn(400);
                    });
                }                               
            }, 2000);
        }
        function showButton(){
            document.getElementById("btn_repeat").style.display='block';
        }
});
     
    })(jQuery);      

The console gives an error for that cr-scroll.js file that con[0] is undefined.

If I remove this file then plugin works fine, why it is conflicting?

Any help will be appreciated, Thank you in advance.

Answer 1

Put it in an if clause to only load on front page:

if (is_front_page()){ // you could also try is_home() 
//or is_page($the_id_of_home_page = 555) If you know the id of the home page

        wp_register_script('java1', get_template_directory_uri() . '/js/cr-scroll.js', array( 'jquery' ));
wp_enqueue_script( 'java1' );
        }

or remove it on a specific page:

function remove_scroll_js(){
    if (is_page($the_id_of_that_page_lets_say = 1001)){
    wp_dequeue_script( 'java1' );
    wp_deregister_script( 'java1' );
}
}

add_action( 'wp_enqueue_scripts', 'remove_scroll_js' );