How to use different javascript libraries on the same page?

Question

I’m using a full screen slider on a page I’m creating, this slide uses the following Javascript styles and functions

jQuery 3.2.1:

var TIMEOUT = 6000;


var interval = setInterval(handleNext, TIMEOUT);

function handleNext() {

  var $radios = $('input[class*="slide-radio"]');
  var $activeRadio = $('input[class*="slide-radio"]:checked');

  var currentIndex = $activeRadio.index();
  var radiosLength = $radios.length;

  $radios
    .attr('checked', false);


  if (currentIndex >= radiosLength - 1) {

    $radios
      .first()
      .attr('checked', true);

  } else {

    $activeRadio
      .next('input[class*="slide-radio"]')
      .attr('checked', true);

  }

}

I want to add an off-canvas toogle menu that uses these Javascript styles and functions

jQuery 2.2.4:

$(window).load(function() {
   $(".btn-nav").on("click tap", function() {
     $(".nav-container").toggleClass("showNav hideNav").removeClass("hidden");
     $(this).toggleClass("animated");
   });
 });

The two codes conflict when used together, I have tried to leave only one library and if I withdraw one does not work the other.

I tried the method without conflict and it didn’t work, at least I couldn’t make it work.

I’m sorry I’m naive, I’m new to programming.

Can you help me?

Answer 1

Your code is wrong using the method .load (which does not serve that purpose) in:

$(window).load(function() {

You want to create the events when the page is finished loading, so you should use:

$(window).on("load", function() {

Analyzing your code, I didn’t identify any version conflicts, just this quoted error that you’re assuming is jQuery conflict. Make the correction and your code should return to work with any of the versions, but I suggest using the latest, 3.2.1.