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

Question

[Денис Кузьмин]

Есть три слайдера с одинаковыми классами на одной странице. Подключаю hammer.js, чтобы реализовать свайп. Отслеживаю класс slider-wrapper. Работает только первый слайдер. Как сделать, чтобы работал каждый?
Пример https://jsfiddle.net/rootsuperuser/er5qxg4p/

Comments

[Lord_Dantes]

Изменить добавить классы и в скрипте прописать эти классы?

[Денис Кузьмин]

slave bb, не подходит. Поскольку слайдеров может быть много и для каждого прописывать - не реально.

[Lord_Dantes]

DenKuzmin, тогда предлагаю вам допустим возможно кривой вариант мб сделать цикл и каждому слайдеру у которого есть класс "ннн" добавлять+1 и далее в скрипте активации также добавлять "+1".

[Денис Кузьмин]

slave bb, понятно, что можно создать уникальные классы. Однако, интересует как сделать, когда классы одинаковые.

Answer 1

[Ivan Bogachev]

Вариантов много. По-хорошему, если вы пишете много простых компонетнов руками на чистом 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 });
});

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

Comments

[Денис Кузьмин]

Это очень круто! Спасибо большое!

[Денис Кузьмин]

можете, пожалуйста, аналогично переделать такой код?

var sliderEl = document.querySelector('.slider');
var slideCount = 3;
var activeSlide = 0; // NEW: the current slide # (0 = first)
var sliderManager = new Hammer.Manager(sliderEl);
sliderManager.add( new Hammer.Pan({ threshold: 0, pointers: 0 }) );
sliderManager.on('pan', function(e) {
  var percentage = 100 / slideCount * e.deltaX / window.innerWidth;
  var transformPercentage = percentage - 100 / slideCount * activeSlide; // NEW
  sliderEl.style.transform = 'translateX( ' + transformPercentage + '% )';
  if(e.isFinal) { // NEW: this only runs on event end
    if(percentage < 0)
      goToSlide(activeSlide + 1);
    else if(percentage > 0)
      goToSlide(activeSlide - 1);
    else
      goToSlide(activeSlide);
  }
});

// NEW: function that changes the slide
var goToSlide = function(number) {
  if(number < 0)
    activeSlide = 0;
  else if(number > slideCount - 1)
    activeSlide = slideCount - 1
  else
    activeSlide = number;

 var percentage = -(100 / slideCount) * activeSlide;
 sliderEl.style.transform = 'translateX(' + percentage + '%)';
};

[Ivan Bogachev]

DenKuzmin,

[Денис Кузьмин]

Ivan Bogachev топ! спасибо огромное!