Hammaer.js how to make multiple sliders with the same classes on the same page?

Question

JavaScript

There are three sliders with the same classes on the same page. I include hammer.js to implement the swipe. Tracking the slider-wrapper class. Only the first slider works. How to make everyone work?
Example https://jsfiddle.net/rootsuperuser/er5qxg4p/

Answer 1

There are many options. In a good way, if you write a lot of simple components by hand in pure JS, then it makes a lot of sense to organize a class system for them. One component - one class. You can organize them in different ways (I like this structure ). For your example, you can start simple:

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 });
});

Then, in order to collect everything in one place, to simplify debugging and get rid of repetitive code, it makes sense to organize a mini-factory for the production of components. Something like this . Thus, you will not only solve your problem, but also make life easier for yourself and for those who will then support your code.

Answer 2

Try a less accurate regular expression, find what's wrong and check

RewriteRule job/$ http://site.org/jobs/ [R=301,L]
RewriteRule ^job$ http://site.org/jobs/ [R=301,L]
RewriteRule +.job/$ http://site.org/jobs/ [R=301,L]

Do not forget to open the incognito browser every time
. Also, do not forget to put this in front of the CNC of site
A, preferably at the very top.
And yes it doesn't work?
1. no redirect
2. wrong place
3. server error