tengo este slider y necesito que sea táctil.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    $(function(){

      (function($) {

      $.fn.shuffle = function() {

        var allElems = this.get(),
          getRandom = function(max) {
            return Math.floor(Math.random() * max);
          },
          shuffled = $.map(allElems, function() {
            var random = getRandom(allElems.length),
              randEl = $(allElems[random]).clone(true)[0];
            allElems.splice(random, 1);
            return randEl;
          });

        this.each(function(e) {
          $(this).replaceWith($(shuffled[e]));
        });

        return $(shuffled);

      };

    })($);

    $('.slider section').hide();
    $('.slider section').shuffle();
    $('.slider section').slice(20).remove()
    $('.slider section').css('display','flex');

      var i = 0;
      var slider_automatic = true;
      var right_arrow = $('#right-circle');
      var left_arrow = $('#left-circle');

      	right_arrow.on('click', function(){
      		i++;
      		changeResize();
      	});

      	left_arrow.on('click', function(){
      		i--;
      		changeResize();
      	});

      var slider = $('.slider');
      var sections = $('.slider section');
      var number_sections = sections.length;

      const tablet = window.matchMedia('(max-width: 1024px)');
      const small_tablet = window.matchMedia('(max-width: 768px)');
      const mobile = window.matchMedia('(max-width: 600px)');
      const small_mobile = window.matchMedia('(max-width: 280px)');

      function changeResize() {

      	var sections_to_show = 5;

        if(small_mobile.matches){
        	sections_to_show = 1;  	
        }

        else if (mobile.matches) {
        	sections_to_show = 2;    	
        }

        else if (small_tablet.matches) {
        	sections_to_show = 3; 	
        }

        else if (tablet.matches) {
        	sections_to_show = 4;	
        }

      slider.css('width', 100 * number_sections / sections_to_show + '%');
      sections.css('width', 100 / number_sections * sections_to_show + '%');

      i = Math.floor(Math.min(Math.max(i, 0), number_sections - sections_to_show));

      if (i > 0) {
        slider.css({
          'left': '-' + 100 / sections_to_show * i + '%'
      });    
    }

      if(i == 0){
      	slider.css('left', 0);
      	slider_automatic = true; 
      } 

      if(i == number_sections - sections_to_show){
        slider_automatic = false;
      }
      	}

      changeResize();

      window.addEventListener('resize', changeResize); 

      setInterval(function(){
        if(slider_automatic == true){
        right_arrow.trigger('click'); 
        }
        else if(slider_automatic == false) {
        left_arrow.trigger('click');
        }
    },3000);

      $(document).on('keydown', function(e){
        if(e.keyCode == 39){
            right_arrow.trigger('click');
        }
        if(e.keyCode == 37){
            left_arrow.trigger('click');
        }
    });

   slider.draggable(); /* <------------------------------------- ESTA FUNCION ME MARCA UN ERROR */

    });

<!-- language: lang-css -->

    body{
    padding: 0;
    margin: 0;
    }
    .container{
    position: relative;
    overflow: hidden;
    }
    .slider{
    display: flex;
    position: relative;
    transition: .4s linear;
    left: 0;
    }
    .slider section{
    height: 300px;
    }
    #left-circle,
    #right-circle{
    position: absolute;
    top: 40%;
    z-index: 30;
    cursor: pointer;
    color: rgba(255,255,255,0.5);
    font-size: 48px;
    }
    #left-circle{
    left: 0;
    }
    #right-circle{
    right: 0;
    }

<!-- language: lang-html -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>

    <div class="container">
    	<i class="fas fa-chevron-circle-left" id="left-circle"></i>
        <i class="fas fa-chevron-circle-right" id="right-circle"></i>
    <div class="slider">
    <section style="background: darkred;"></section>
    <section style="background: darkblue;"></section>
    <section style="background: darkorange;"></section>
    <section style="background: black;"></section>
    <section style="background: gold;"></section>
    <section style="background: lightblue;"></section>
    <section style="background: yellow;"></section>
    <section style="background: brown;"></section>
    <section style="background: skyblue;"></section>
    <section style="background: green;"></section>
    <section style="background: gray;"></section>
    <section style="background: purple;"></section>
    <section style="background: chocolate;"></section>
    <section style="background: pink;"></section>
    <section style="background: orange;"></section>
    <section style="background: maroon;"></section>
    <section style="background: violet;"></section>
    <section style="background: navy"></section>
    <section style="background: fuchsia"></section>
    <section style="background: darkgray"></section>
    </div>
    	</div>

<!-- end snippet -->

Agregué estos dos scripts `http://code.jquery.com/ui/1.8.17/jquery-ui.min.js y jquery.ui.touch-punch.min.js` para poder hacer tactil al slider, ademas de agregar esto `slider.draggable()`, me marca el siguiente error:

    > jquery-ui.min.js:9 Uncaught TypeError: Cannot read property 'msie' of undefined
    at a.<computed>.<computed>._mouseMove (jquery-ui.min.js:9)
    at HTMLDocument._mouseMoveDelegate (jquery-ui.min.js:9)
    at HTMLDocument.dispatch (jquery.js:4)
    at HTMLDocument.r.handle (jquery.js:4)
    at f (jquery.ui.touch-punch.min.js:11)
    at a.<computed>.<computed>.b._touchMove (jquery.ui.touch-punch.min.js:11)
    at HTMLDivElement.e (jquery.js:2)
    at HTMLDivElement.dispatch (jquery.js:4)
    at HTMLDivElement.r.handle (jquery.js:4)

 Estoy usando la libreria [Touch punch][1], ¿Alguien sabe usar esta librería?, no puedo ingregar a su página oficial [**http://touchpunch.furf.com/**][2] , no esta disponible, y en su pagina de github no muestran un ejemplo claro, exactamente dicen que agregue esto `$('#widget').draggable()` , pero ese selector no existe en mi archivo.html . Entonces ¿Cómo se usa TouchPunch? o ¿Existe alguna variante a TouchPunch?, Agradecería mucho que me puedan ayudar a convertir este slider a táctil, pienso implementar sliders táctiles en futuros proyectos. Gracias


  [1]: https://github.com/furf/jquery-ui-touch-punch
  [2]: http://touchpunch.furf.com/