添加jQuery Mobile Swipe功能以进行幻灯片放映

Question

我正在使用JS幻灯片。我的问题是我不太清楚如何为手机添加滑动功能。我正在尝试使用下一个代码但没有成功，我无法使其工作：

HTML

<div class="gallery" id="gallery-001">
    <div class="gallery-frame">
        <div class="gallery-slide">
            <img class="gallery-picture" src="https://images.unsplash.com/photo-1465935343323-d742334bcbda?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
            <p class="gallery-caption">Slide 01</p>
        </div>
        <div class="gallery-slide">
            <img class="gallery-picture" src="https://images.unsplash.com/photo-1443890923422-7819ed4101c0?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
            <p class="gallery-caption">Slide 02</p>
        </div>
        <div class="gallery-slide">
            <img class="gallery-picture" src="https://images.unsplash.com/photo-1474861644511-0f2775ae97cc?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
            <p class="gallery-caption">Slide 03</p>
        </div>

    </div>
</div>

JS

    (function() {   

  //on page load - show first slide, hide the rest
      init(); 
      function init() {
        parents = document.getElementsByClassName('gallery');
        for (j = 0; j < parents.length; j++) {
          var slides = parents[j].getElementsByClassName("gallery-slide");
          slides[0].classList.add('active-gallery-slide');
        }
      }

    //mobile swipe right functionality
        jQuery( ".gallery-frame" ).on( "swiperight", function( event ) {
          current = this;
          var slides = current.getElementsByClassName("gallery-slide");
          curr_slide = current.getElementsByClassName('active-gallery-slide')[0];
          curr_slide.classList.remove('active-gallery-slide');
            if (curr_slide.nextElementSibling) {
              curr_slide.nextElementSibling.classList.add('active-gallery-slide');
            } else {
              slides[0].classList.add('active-gallery-slide');
            }        
        })

    //mobile swipe left functionality
        jQuery( ".gallery-frame" ).on( "swipeleft", function( event ) {
          current = this;
          var slides = current.getElementsByClassName("gallery-slide");
          curr_slide = current.getElementsByClassName('active-gallery-slide')[0];
          curr_slide.classList.remove('active-gallery-slide');
            if (curr_slide.previousElementSibling) {
              curr_slide.previousElementSibling.classList.add('active-gallery-slide');
            } else {
              slides[0].classList.add('active-gallery-slide');
            }        
        })

    })();

请检查代码中的代码：CODEPEN