How to use the hammerjs.Swipe function in hammerjs

addTouchGestures() {
    if (!this.slide) {
      return false
    }

    this.hammer = new Manager(this.slide)
    this.hammer.add(new Swipe())

    this.hammer.on('swipe', (e) => {
      switch (e.direction) {
        case 4: {
          return this.nextSlide()
        }

        case 2: {
          return this.previousSlide()
        }

        // no default
      }
    })
  }

this.slideCallback = this.next;

        this.setPaneDimensions();

        $(window).on("load resize orientationchange", function() {
            this.setPaneDimensions();
            this.setState({ slide_width: $(window).width() });
        }.bind(this));

        if(this.pane_count > 1){

            var mc = new Hammer.Manager(element, { drag_lock_to_axis: true } );

            mc.add( new Hammer.Pan( { threshold: 0, direction: Hammer.DIRECTION_HORIZONTAL }) );
            mc.add( new Hammer.Swipe( { threshold: 1 }) ).recognizeWith( mc.get('pan') );

            mc.on("panend pancancel panleft panright swipeleft swiperight", this.handleHammer);

            /* From Modernizr */
            function whichTransitionEvent(){
                var t;
                var el = document.createElement('fakeelement');
                var transitions = {
                  'transition':'transitionend',
                  'OTransition':'oTransitionEnd',
                  'MozTransition':'transitionend',
                  'WebkitTransition':'webkitTransitionEnd'
                }

                for(t in transitions){
                    if( el.style[t] !== undefined ){

handleSwipe() {
    let manager = new Hammer.Manager(this.dom.playlist)
    let swipe = new Hammer.Swipe({
      direction: Hammer.DIRECTION_HORIZONTAL
    })

    this.dom.playlist.style['touch-action'] = 'manipulation'

    manager.add(swipe)

    manager.on('swipeleft', () => {
      this.dom.controlNext.click()
    })

    manager.on('swiperight', () => {
      this.dom.controlPrev.click()
    })
  }

show() {
    const self = this;
    const stage = document.getElementById('content-model');
    const mc = new Hammer.Manager(stage);
    const SwipeLeft = new Hammer.Swipe({
      event: 'swipeleft',
      direction: Hammer.DIRECTION_LEFT,
    });
    const SwipeRight = new Hammer.Swipe({
      event: 'swiperight',
      direction: Hammer.DIRECTION_RIGHT,
    });
    const Tap = new Hammer.Tap();
    mc.add(SwipeLeft);
    mc.add(SwipeRight);
    mc.add(Tap);

    self.imageSelector.click((e) => {
      const index = self.images.indexOf(e.target.src);
      self.changeImage(index);
      $('.model').addClass('show animated fadeIn');

addTouchControls() {
    this.hammer = new Manager(document.body, {
      touchAction: 'pan-y',
    })
    this.hammer.add(new Swipe())
    this.hammer.on('swipe', (e) => {
      const { sidebar } = this.state
      const { actions, open: sidebarOpen } = sidebar
      const { activate, deactivate } = actions

      if (sidebarOpen) { //
        if (e.direction === 4) {
          deactivate()
        }
      } else {
        if (e.direction === 2) {
          activate()
        }
      }
    })
  }

export const addSwipeListener = () => {
  const mc = new Manager(document.body)

  mc.add( new Swipe({ direction: DIRECTION_HORIZONTAL, threshold: 0 }) )
  mc.on("swipeleft", nextSlide)
  mc.on("swiperight", previousSlide)

}

var createHammer = function(v) {
      var mc = new Hammer.Manager(v, {})
      var pan = new Hammer.Pan({
        direction: Hammer.DIRECTION_HORIZONTAL,
        threshold: 25
      })
      var tap = new Hammer.Tap({
        domEvents: true
      })
      var swipe = new Hammer.Swipe({
        direction: Hammer.DIRECTION_HORIZONTAL,
        velocity: 0.5,
        threshold: 250
      })

      pan.recognizeWith(swipe)

      mc.add(pan)
      mc.add(tap)
      mc.add(swipe)
      mc.on('swipe panleft panright panend tap', handleHammer)
    }

show() {
    const self = this;
    const stage = document.getElementById('content-model');
    const mc = new Hammer.Manager(stage);
    const SwipeLeft = new Hammer.Swipe({
      event: 'swipeleft',
      direction: Hammer.DIRECTION_LEFT,
    });
    const SwipeRight = new Hammer.Swipe({
      event: 'swiperight',
      direction: Hammer.DIRECTION_RIGHT,
    });
    const Tap = new Hammer.Tap();
    mc.add(SwipeLeft);
    mc.add(SwipeRight);
    mc.add(Tap);

    self.imageSelector.click((e) => {
      const index = self.images.indexOf(e.target.src);
      self.changeImage(index);
      $('.model').addClass('show animated fadeIn');
      setTimeout(() => {
        $('.model').removeClass('animated fadeIn');
      }, 300);
      $('body').addClass('model-open');

$('p:has(img)').addClass('img');
  $('pre code').each((i, block) => {
    hljs.highlightBlock(block);
  });
  sr.reveal('.article', {viewFactor: 0.000001});
  $('html').removeClass('sr');

  const iv = new ImageGallery('.article');

  const stage = document.getElementById('content-model');
  const mc = new Hammer.Manager(stage);
  const SwipeLeft = new Hammer.Swipe({
    event: 'swipeleft',
    direction: Hammer.DIRECTION_LEFT,
  });
  const SwipeRight = new Hammer.Swipe({
    event: 'swiperight',
    direction: Hammer.DIRECTION_RIGHT,
  });
  const Tap = new Hammer.Tap();
  mc.add(SwipeLeft);
  mc.add(SwipeRight);
  mc.add(Tap);

  $('.article img').click((e) => {
    const index = iv.images.indexOf(e.target.src);
    iv.changeImage(index);
    $('.model').addClass('show animated fadeIn');
    setTimeout(() => {
      $('.model').removeClass('animated fadeIn');
    }, 300);
    $('body').addClass('model-open');