@DenKuzmin

Hammaer.js как сделать несколько слайдеров с одинаковыми классами на одной странице?

Есть три слайдера с одинаковыми классами на одной странице. Подключаю hammer.js, чтобы реализовать свайп. Отслеживаю класс slider-wrapper. Работает только первый слайдер. Как сделать, чтобы работал каждый?
Пример https://jsfiddle.net/rootsuperuser/er5qxg4p/
  • Вопрос задан
  • 135 просмотров
Решения вопроса 1
sfi0zy
@sfi0zy Куратор тега JavaScript
UI developer. Верстаю неверстаемое.
Вариантов много. По-хорошему, если вы пишете много простых компонетнов руками на чистом 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 });
});


Затем, чтобы собрать все в одном месте, упростить отладку и избавиться от повторяющегося кода, имеет смысл организовать мини-фабрику по производству компонентов. Что-то вроде такого. Таким образом вы не только решите свою задачу, но и упростите жизнь себе и тем, кто будет ваш код потом поддерживать.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы