Как реализовать свайп в слайдере?
Есть такой код слайдера, как добавить к нему возможность свайпа?
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>