js does not work in yii2, what could be the problem?

Question

JavaScript

trying to connect sidebar https://github.com/eduardomb/jquery-panelslider to yii2 site

1) put this script in /namesite/frontend/web/js/jquery.panelslider.min.js folder
2) created file panel.js in /namesite/frontend/web/js/j

$('#left-panel-link').panelslider();
    $('#right-panel-link').panelslider({side: 'right', clickClose: false, duration: 600, easingOpen: 'easeInBack', easingClose: 'easeOutBack'});

    $('#close-panel-bt').click(function() {
      $.panelslider.close();
    });

4) registered it in /namesite/frontend/assets/AppAsset.php

public $js = [
        'js/jquery.panelslider.min.js',
      'js/panel.js',
    ];

5) wrote the code itself in index.php /namesite/frontend/views/site

<div id="page">
    <h1>Panel slider example</h1>
    <a id="left-panel-link" href="#left-panel">Open left panel</a> |
    <a id="right-panel-link" href="#right-panel">Open right panel</a>
    <hr />
    <p>Usage instructions and source code <a href="https://github.com/eduardomb/jquery-panelslider">here</a></p>
  </div>

  <!-- Left panel -->
  <div id="left-panel" class="panel">
    <h2>Left panel</h2>
    <p>Click anywhere outside panel to close it.</p>
  </div>

  <!-- Right panel -->
  <div id="right-panel" class="panel">
    <h2>Right panel</h2>
    <p>Clicking outside this panel wont close it because <code>clickClose = false</code></p>
    <button id="close-panel-bt">Close</button>
  </div>

  <!-- Load jQuery from Google CDN -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  
  <!-- Only required if you choose to use jQuery Easing animations -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
  
  <!-- Load Panelslider -->
  <script src="http://localhost/namesite/frontend/web/js/jquery.panelslider.min.js"></script>
  <script>
    $('#left-panel-link').panelslider();
    $('#right-panel-link').panelslider({side: 'right', clickClose: false, duration: 600, easingOpen: 'easeInBack', easingClose: 'easeOutBack'});

    $('#close-panel-bt').click(function() {
      $.panelslider.close();
    });
  </script>


</div>

Answer 1

The plugin is not bustroep - it conflicts with the bootstrap jaquery.
I loaded a separate jaquery for it and the versions of the jamware are different for the plugin and for yii2, in ui - it is bootstrap (trimmed) besides,
here's what works

<script>
  $.noConflict();
  jQuery( document ).ready(function( $ ) {
  !function(e){"use strict";function i(e,i){var a=e.outerWidth(!0),s={},l={};if(!e.is(":visible")&&!t){switch(t=!0,e.addClass("ps-active-panel").css({position:"fixed",top:0,height:"100%","z-index":999999}),e.data(i),i.side){case"left":e.css({left:"-"+a+"px",right:"auto"}),s["margin-left"]="+="+a,l.left="+="+a;break;case"right":e.css({left:"auto",right:"-"+a+"px"}),s["margin-left"]="-="+a,l.right="+="+a}n.animate(s,i.duration,i.easingOpen),e.show().animate(l,i.duration,i.easingOpen,function(){t=!1,"function"==typeof i.onOpen&&i.onOpen()})}}var n=e("body"),t=!1;e.panelslider=function(n,t){var a=e(".ps-active-panel"),s={side:"left",duration:200,clickClose:!0,onOpen:null,easingOpen:null,easingClose:null};t=e.extend({},s,t),a.is(":visible")&&a[0]!=n[0]?e.panelslider.close(function(){i(n,t)}):(!a.length||a.is(":hidden"))&&i(n,t)},e.panelslider.close=function(i){var a=e(".ps-active-panel"),s=a.data("duration"),l=a.outerWidth(!0),o={},c={},r=a.data("easingClose");if(a.length&&!a.is(":hidden")&&!t){switch(t=!0,a.data("side")){case"left":o["margin-left"]="-="+l,c.left="-="+l;break;case"right":o["margin-left"]="+="+l,c.right="-="+l}a.animate(c,s,r),n.animate(o,s,r,function(){a.hide(),a.removeClass("ps-active-panel"),t=!1,i&&i()})}},e(document).bind("click keyup",function(i){var n=e(".ps-active-panel");("keyup"!=i.type||27==i.keyCode)&&n.is(":visible")&&n.data("clickClose")&&e.panelslider.close()}),e(document).on("click",".ps-active-panel",function(e){e.stopPropagation()}),e.fn.panelslider=function(i){return this.click(function(n){var t=e(".ps-active-panel"),a=e(this.getAttribute("href"));t.is(":visible")&&a[0]==t[0]?e.panelslider.close():e.panelslider(a,i),n.preventDefault(),n.stopPropagation()}),this}}(jQuery);

  $('#left-panel-link').panelslider();
  $('#right-panel-link').panelslider({side: 'right', clickClose: false, duration: 200 });
    $('#close-panel-bt').click(function() {
      $.panelslider.close();
   });
  });


  </script>