JSFiddle - React, Tailwind, and code Playground

by LuckyCat

JavaScript

// below is the plugin code
'use strict';

function $(elem) {
  return document.querySelector(elem);
}

function hasClass(el, className) {
  return el.classList ? el.classList.contains(className) : new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
}

function addClass(el, className) {
  if (el.classList) {
    el.classList.add(className);
  } else {
    el.className += ' ' + className;
  }
}

function removeClass(el, className) {
  if (el.classList) {
    el.classList.remove(className);
  } else {
    el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
  }
}

function $extendObj(_def, addons) {
  if (typeof addons !== "undefined") {
    for (var prop in _def) {
      if (addons[prop] != undefined) {
        _def[prop] = addons[prop];
      }
    }
  }
}

var slider_plugin = (function() {

  var fifi_slider = function(settings) {
    var _ = this;

    // always loop
    _.def = {
      target: $('.slider'),
      dotsWrapper: $('.dots-wrapper'),
      arrowLeft: $('.arrow-left'),
      arrowRight: $('.arrow-right'),
      transition: {
        speed: 300,
        easing: ''
      },
      swipe: true,
      autoHeight: true,
      afterChangeSlide: function afterChangeSlide() {}
    }

    $extendObj(_.def, settings);

    _.init();
  }

  fifi_slider.prototype.buildDots = function() {
    var _ = this;

    for (var i = 0; i < _.totalSlides; i++) {
      var dot = document.createElement('li');
      dot.setAttribute('data-slide', i + 1);
      _.def.dotsWrapper.appendChild(dot);
    }

    _.def.dotsWrapper.addEventListener('click', function(e) {
      if (e.target && e.target.nodeName == "LI") {
        _.curSlide = e.target.getAttribute('data-slide');
        _.gotoSlide();
      }
    }, false);
  }
  fifi_slider.prototype.getCurLeft = function() {
    var _ = this;
    _.curLeft = parseInt(_.sliderInner.style.left.split('px')[0]);
  }
  fifi_slider.prototype.gotoSlide =...