Вариантов много. По-хорошему, если вы пишете много простых компонетнов руками на чистом JS, то очень имеет смысл организовать систему классов для них. Один компонент - один класс. Организовать их можно по-разному (мне
вот такая структура нравится). Для вашего примера можно начать с простого:
class MySlider {
constructor(element, options) {
const manager = new Hammer.Manager(element);
manager.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
manager.on('pan', (e) => {
const percentage = 100 / options.numberOfSlides * e.deltaX / window.innerWidth;
element.style.transform = `translateX(${percentage}%)`;
});
}
}
[].forEach.call(document.querySelectorAll('.slider-wrapper'), (element) => {
const slider = new MySlider(element, { numberOfSlides: 2 });
});
Затем, чтобы собрать все в одном месте, упростить отладку и избавиться от повторяющегося кода, имеет смысл организовать мини-фабрику по производству компонентов. Что-то вроде
такого. Таким образом вы не только решите свою задачу, но и упростите жизнь себе и тем, кто будет ваш код потом поддерживать.
