.slider
    .slider__wrapper
        .slider__slide 1 / 2
        .slider__slide 2 / 2
        
.slider
    .slider__wrapper
        .slider__slide 1 / 4
        .slider__slide 2 / 4
        .slider__slide 3 / 4
        .slider__slide 4 / 4
        
        
.slider
    .slider__wrapper
        .slider__slide 1 / 8
        .slider__slide 2 / 8
        .slider__slide 3 / 8
        .slider__slide 4 / 8
        .slider__slide 5 / 8
        .slider__slide 6 / 8
        .slider__slide 7 / 8
        .slider__slide 8 / 8

.slider {
    display: flex;
    margin: 1rem auto;
    width: 300px;
    overflow: hidden;
    cursor: pointer;
    border-radius: .3rem;

    &__wrapper {
        display: flex;
        transition: transform .3s cubic-bezier(.5, 0, .5, 1);
    }

    &__slide {
        display: flex;
        width: 300px;
        height: 150px;
        align-items: center;
        justify-content: center;
    }
}


// --------------------------------------------

body {
    background: #141414;
}

.slider {
    background: #25D172;
    color: #fff;
    font-size: 3rem;
    
    &:nth-of-type(2) {
        background: #EA526F;
    }
    
    &:nth-of-type(3) {
        background: #25CED1;
    }
}

class MySlider {
    constructor(element) {
        this.domCache = {
            element,
            wrapper: element.querySelector('.slider__wrapper'),
            slides: element.querySelectorAll('.slider__slide')
        };

        this.state = {
            activeSlideIndex: 0
        };

        this.initControls();
    }
    
    
    initControls() {
        const manager = new Hammer.Manager(this.domCache.wrapper);

        manager.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
        manager.on('pan', this.onPan.bind(this));
    }
    

    onPan(e) {
        const numberOfSlides = this.domCache.slides.length;
        const activeIndex = this.state.activeSlideIndex;
        const percentage = 100 / numberOfSlides * e.deltaX / window.innerWidth;
        const transformPercentage = percentage - 100 / numberOfSlides * activeIndex;

        this.domCache.wrapper.style.transform = `translateX(${transformPercentage}%)`;

        if (e.isFinal) {
            if (percentage < 0) {
                this.goToSlide(activeIndex + 1);
            } else if (percentage > 0) {
                this.goToSlide(activeIndex - 1);
            } else {
                this.goToSlide(activeIndex);
            }
        }
    }

    goToSlide(index) {
        const numberOfSlides = this.domCache.slides.length;
        
        if (index < 0) {
            this.state.activeSlideIndex = 0;
        } else if (index > numberOfSlides - 1) {
            this.state.activeSlideIndex = numberOfSlides - 1
        } else {
            this.state.activeSlideIndex = index;
        }

        const percentage = -(100 / numberOfSlides) * this.state.activeSlideIndex;
        
        this.domCache.wrapper.style.transform = `translateX(${percentage}%)`;
    }
}


[].forEach.call(document.querySelectorAll('.slider'), (element) => {
    const slider = new MySlider(element);
});