loryWrapper.js

import './carousel.scss';
var _forEach = require('lodash').forEach;
import {lory} from 'lory.js'; // get lory

export class Carousel {

    constructor(settings = {}) {
        var timer = this._timer = 0;
        var paused = this._paused = false;
        var speed = this._speed = 5000;
    };

    buildArrows(carousel) {
        var arrowInner = `<li class="carousel-prev"><i class="icon icon-angle-left"></i></li>
        <li class="carousel-next"><i class="icon icon-angle-right"></i></li>`;
        var arrows = document.createElement('ul');
        arrows.classList.add('carousel-arrows');
        arrows.innerHTML = arrowInner;
        carousel.appendChild(arrows);

        return arrows;
    }

    buildDots(carousel) {
        var carouselSlides = carousel.querySelector('.carousel-frame ul').children;

        var dots = document.createElement("ul");
        _forEach(carouselSlides, (item, index) => {
            var li = document.createElement("li");
            if (index === 0) {
                li.classList.add('carousel-active-dot');
            }
            dots.appendChild(li);
        });
        var dotsContainer = document.createElement('div');
        dotsContainer.classList.add('carousel-dots');
        dotsContainer.appendChild(dots);
        carousel.appendChild(dotsContainer);

        return dots;
    }

    registerLory(carousel) {
        var self = this;

        // CREATE CHANGE EVENTS!
        carousel.addEventListener('before.lory.slide', (evt) => {
            self._arrows.children[0].style.pointerEvents = 'none';
            self._arrows.children[1].style.pointerEvents = 'none';
            self._timer = 0;
            var dots = self._dots.querySelectorAll('li');
            _forEach(dots, (item, index) => {
                item.classList.remove('carousel-active-dot');
            });
        });

        carousel.addEventListener('after.lory.slide', (evt) => {
            setTimeout(() => {
                self._arrows.children[0].style.pointerEvents = '';
                self._arrows.children[1].style.pointerEvents = '';
            }, 500);
            var dots = self._dots.querySelectorAll('li');
            dots[evt.detail.currentSlide-1].classList.add('carousel-active-dot'); 
        });

        this._carousel = lory(carousel, {
            infinite: 1,
            classNameFrame: 'carousel-frame',
            classNameSlideContainer: 'carousel-slides',
            classNamePrevCtrl: 'carousel-prev',
            classNameNextCtrl: 'carousel-next',
            slideSpeed: 600
        });

        carousel.addEventListener('mouseover', () => {
            self._paused = true;
        });

        carousel.addEventListener('mouseout', () => {
            self._paused = false;
        });

        carousel.addEventListener('touchstart', () => {
            self._paused = true;
        });

        carousel.addEventListener('touchend', () => {
            self._paused = false;
        });
    }

    /**
     * Register Timer
     */
     _registerTimer() {
         var self = this; 
         this._autoPlayTimer = setInterval(function(){
             if (self._paused) {
                 self._timer = 0;
                 return;
             }

             self._timer += 100;
             if (self._speed === self._timer){ 
                 self._carousel.next();
                self._timer = 0;  // put in complete callback
            }
        }, 100);
     }

    /**
     * Pause
     */
     pause() {
         this._paused = true;
     }

    /**
     * Start
     */
     start() {
         this._paused = false;
     }

}