Как реализовать свайп в слайдере?

Есть такой код слайдера, как добавить к нему возможность свайпа?

    constructor(node) {
      this.node = node
      this.list = null
      this._counter = 0
      this.sides = 0
      this.step = 0
      this.shift = 0
      
      this.findParts()
      this.prepare()
      this.listen()
    }
    
    findParts() {
      this.list = this.node.querySelector('[data-slider-list]')
      this.items = [...this.list.children]
      this.step_buttons = [...this.node.querySelectorAll('[data-slider-step-button]')].map((button) => {
          return {
          node: button,
          value: !!button.dataset.sliderStepButton ? +button.dataset.sliderStepButton: 1
        }
      })
    }
    
    prepare() {
      this.sides = this.items.length
      this.step = 2 * Math.PI / this.sides
      this.shift = Math.PI / 2
      this.counter = 0
    }
    
    listen() {
      this.step_buttons.forEach(button => {
          button.node.addEventListener('click', () => {
          this.counter = this.counter + button.value
        })
      })
    }
    
    listenKeys(e) {
      if(e.key === 'ArrowLeft') {
        this.counter = this.counter - 1
      } else if(e.key === 'ArrowRight') {
        this.counter = this.counter + 1
      }
    }
    
    notify() {
      this.items.forEach((item, i) => {
        const pos = (i + this.counter) * this.step + this.shift
        const cos = Math.cos(pos)
        const sin = Math.sin(pos)
        const scale = Math.max(0.3, (sin + 1) / 2)
        
        item.style.setProperty('--cos', cos)
        item.style.setProperty('--sin', sin)
        item.style.setProperty('--scale', scale)
      })
    }
    
    get counter() {
      return this._counter
    }
    
    set counter(new_value) {
      this._counter = new_value < 0 ? this.sides + new_value : new_value % this.sides
      this.notify()
    }

    
  }
  
const slider = new Slider(document.querySelector('.slider'))
<div class="slider">
       <div data-slider-step-button="1">
           <ul class="slider__list" data-slider-list>
           <li class="slider__list__item"></li>
           <li class="slider__list__item"></li>
           <li class="slider__list__item"></li>
           </ul>
       </div>
   </div>

Ответы (0 шт):