How to use different javascript libraries on one page?

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 the page to a toogle off-canvas 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 one retreats, the other does not work.

I tried the method without conflict and it did not work, at least I could not get it to work.

Sorry for the naivety, I'm new to programming.

Can you help me?