Функция прокрутки на слайдере контента (не работает)

Question

У меня есть слайдер содержимого, в котором я хотел добавить функцию смахивания на мобильных устройствах, пытаясь реализовать найденный мной скрипт. Я прочитал инструкцию и изменил код, но он не работает. Надеюсь, кто-то может помочь мне с кодом и учтите, что я абсолютный новичок в JavaScript ...

Я вставил весь код, а не только код для функции смахивания, так что вы сможете чтобы проверить все слайд-шоу и посмотреть, как это работает. В случае, если вам нужно увидеть его, чтобы сработала опция смахивания.

// Slider (Everything works fine)

$('#slider').each(function(slider_idx) { // Use each, so you can have multiple sliders

  let curr = 0; // Set current index
  let itv = null; // The interval holder

  const $slider = $(this);
  const $nav = $('.slider-nav', $slider);
  const $items = $('.slider-items', $slider);
  const $item = $('.slider-item', $slider);
  const tot = $item.length; // How many
  const btns = [...new Array(tot)].map((_, i) => $('<input>', {
    type: 'radio',
    name: 'slider-button',
    id: 'radio-button' + [i],
    checked: curr == i,
    change() { // On button change event
      curr = i; // Set current index to this button index
      anim();
    }


  })[0]);

  function anim() {
    $items.css({
      transform: `translateX(-${curr*100}%)`
    }); // Animate
    btns[curr].checked = true; // Change nav btn state
  }

  function play() {
    itv = setInterval(() => {
      curr = ++curr % tot; // increment curr and reset to 0 if exceeds tot
      anim(); // and animate!
    }, 3000); // Do every 3sec
  }

  function stop() {
    clearInterval(itv);
  }

  $nav.empty().append(btns); // Insert buttons
  $slider.hover(stop, play); // Handle hover state
  play(); // Start autoplay!


  function addLabels() {
    var radioButton = document.getElementsByTagName("input");

    for (var i = 0; i <= radioButton.length; i++) {
      var radioButtonId = radioButton[i].id;
      var label = "<label for='" + radioButtonId + "'></label>";
      $(label).insertAfter(radioButton[i]);
    }
  }

  addLabels();

});


// Swipe Function (doesn't work)

$(document).ready(function() {
  (function (l) {
      var M = Math,
          ce, cx, cy, dx, dy, b, f, i, m, s, t = function (e, i) {
              m = i;
              i = e.touches;
              return {
                  x: i[0].pageX,
                  y: i[0].pageY,
                  z: i.length
              }
          };
      for (i in s = {
              touchcancel: function (e) {
                  m = 0
              },
              touchstart: function (e) {
                  b = t(e, 0)
              },
              touchmove: function (e) {
                  f = t(e, 1)
              },
              touchend: function (e) {
                  if (b.z > 1) return;
                  ce = l.createEvent('CustomEvent');
                  ce.initCustomEvent(m ? (M.max(dx = M.abs(cx = f.x - b.x), dy = M.abs(cy = f.y - b.y)) > 25 ? dx > dy ? cx < 0 ? 'l' : 'r' : cy < 0 ? 'u' : 'd' : 'fc') : 'fc', true, true, b);
                  e.target.dispatchEvent(ce);
              }
          }) l.addEventListener(i, s[i], false)
  })(document);
  
  function autoSlider(slider, direction){
      var slides = document.getElementsByName("slider-button");
      for(var i = 1; i < slides.length; ++i){
          if(slides[i].checked == true){
              (navigator.appVersion.indexOf("MSIE 9") == -1) ? jump = 2 : jump = 3;
              if(direction == 'r'){ // right
                  (i == 1) ? slides[slides.length - jump].checked = true : slides[i-1].checked = true; // backwards
                  } else { // left
                  (i == slides.length - jump) ? slides[1].checked = true : slides[i+1].checked = true; // forwards 
                  }
              break;
              }
          }
      }
  
  function swipesliderLeft(){ // swipe left
    autoSlider('slider', 'l'); // pass 'l' (left) direction to autoSlider() function
    stopSlider(); 
    }
  function swipesliderRight(){ // swipe right
    autoSlider('slider', 'r'); // pass 'r' (right) direction to autoSlider() function 
    stopSlider(); 
      }
      
  slider.addEventListener('l', swipesliderLeft, false); // swipe left
  slider.addEventListener('r', swipesliderRight, false); // swipe right
  
});

body {
  margin: 0;
  padding: 0;
}

#slider {
  height: 100px;
  position: relative;
}

.slider-overflow {
  height: inherit;
  overflow: hidden;
}

.slider-items {
  height: inherit;
  display: flex;
  flex-flow: row nowrap;
  transition: transform 1s;
}

.slider-item {
  height: inherit;
  overflow: hidden;
  flex: 0 0 100%;
}

.slider-nav {
  position: absolute;
  width: 100%;
  bottom: 20px;
  text-align: center;
  z-index: 1;
}

.slider-nav input {
  display: none;
}

.slider-nav label {
  width: 10px;
  height: 10px;
  border: 3px solid #000;
  background-color: #000;
  border-radius: 50%;
  display: inline-block;
  margin: 0 7.5px;
  cursor: pointer;
}

.slider-nav input:checked+label {
  background-color: transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="slider">

  <div class="slider-overflow">
    <div class="slider-items">

      <div class="slider-item" style="background: #F00"></div>
      <div class="slider-item" style="background: #0F0"></div>
      <div class="slider-item" style="background: #00F"></div>

    </div>
  </div>

  <div class="slider-nav"></div>

</section>