moreodor slider babel

gistfile1.txt

(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
"use strict";

require("./scripts/slider");

},{"./scripts/slider":2}],2:[function(require,module,exports){
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

var Slider =
/*#__PURE__*/
function () {
  function Slider(container, sliderItemSelector) {
    _classCallCheck(this, Slider);

    this.container = document.querySelector(container);
    this.sliderItems = this.container.querySelectorAll(sliderItemSelector);
    this.currentItemIndex = 0;
    this.currentItem = this.container.querySelector(sliderItemSelector);
    this.init();
  }

  _createClass(Slider, [{
    key: "init",
    value: function init() {
      if (this.sliderItems.length < 2) {
        this.findSliderButtons();
        this.buttons.style.display = 'none';
        return;
      }

      this.copyItemsContent();
      this.findSliderButtons();
      this.findLeftSliderButton();
      this.findRightSliderButton();
      this.bindThisToCallbacks();
      this.addEventListeners();
    }
  }, {
    key: "copyItemsContent",
    value: function copyItemsContent() {
      var copy = [];
      this.sliderItems.forEach(function (item) {
        copy.push(item.cloneNode(true));
      });
      this.copy = copy;
    }
  }, {
    key: "findSliderButtons",
    value: function findSliderButtons() {
      this.buttons = this.container.querySelector('.navigation_arrows');
      console.log(this.buttons);
    }
  }, {
    key: "findLeftSliderButton",
    value: function findLeftSliderButton() {
      this.leftSliderButton = this.buttons.querySelector('.navigation_arrows__arrow-left');
    }
  }, {
    key: "findRightSliderButton",
    value: function findRightSliderButton() {
      this.rightSliderButton = this.buttons.querySelector('.navigation_arrows__arrow-right');
    }
  }, {
    key: "bindThisToCallbacks",
    value: function bindThisToCallbacks() {
      this.showPreviousItem = this.showPreviousItem.bind(this);
      this.showNextItem = this.showNextItem.bind(this);
    }
  }, {
    key: "addEventListeners",
    value: function addEventListeners() {
      this.leftSliderButton.addEventListener('click', this.showPreviousItem);
      this.rightSliderButton.addEventListener('click', this.showNextItem);
    }
  }, {
    key: "showPreviousItem",
    value: function showPreviousItem() {
      console.log(this.currentItemIndex);
      this.currentItemIndex -= 1;

      if (this.currentItemIndex < 0) {
        this.currentItemIndex = this.copy.length - 1;
      }

      this.currentItem.innerHTML = this.copy[this.currentItemIndex].innerHTML;
    }
  }, {
    key: "showNextItem",
    value: function showNextItem() {
      this.currentItemIndex += 1;

      if (this.currentItemIndex === this.copy.length) {
        this.currentItemIndex = 0;
      }

      this.currentItem.innerHTML = this.copy[this.currentItemIndex].innerHTML;
    }
  }]);

  return Slider;
}();

;
var _default = Slider;

exports.default = _default;

},{}]},{},[1]);