JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<div class="slider controls bodyclass animated" id="sliderA">
    <figure class="slide first-slide">
        <h2>First slide</h2>
    </figure>
    <figure class="slide second-slide">
        <h2>Second slide</h2>
    </figure>
    <figure class="slide third-slide">
        <h2>Third slide</h2>
    </figure>
</div>
<hr />
<div class="slider controls bodyclass animated" id="sliderB">
    <figure class="slide first-slide">
        <h2>First slide</h2>
    </figure>
    <figure class="slide second-slide">
        <h2>Second slide</h2>
    </figure>
    <figure class="slide third-slide">
        <h2>Third slide</h2>
    </figure>
</div>

CSS

body{
    font-smoothing: antialiased;
}
.slide{
    margin: 0;
    height: 20em;
    background: gray;
    float: left;
}
.slide,
.slider-area{
    width: 30em;
}
.slider{
    position: relative;
}
.slider.animated{
    -webkit-transition: -webkit-transform 400ms ease-in-out;
    -moz-transition: -moz-transform 400ms ease-in-out;
    -ms-transition: -ms-transform 400ms ease-in-out;
    -o-transition: -o-transform 400ms ease-in-out;
    transition: transform 400ms ease-in-out;
}
.slider-area{
    overflow: hidden;
}

.first-slide{
    background: #C98862;
}
.second-slide{
    background: #C775A5;
}
.third-slide{
    background: #CADD74;
}

JavaScript

(function($, window) {
  var SimpleSlider;
  SimpleSlider = (function() {

    SimpleSlider.prototype.values = {
      startX: 0,
      curX: 0,
      oldX: 0,
      slideCount: 0,
      slideWidth: 0,
      hasControls: false,
      slider: null
    };

    SimpleSlider.prototype.settings = {
      prevBtnText: "Previous slide",
      nextBtnText: "Next slide",
      debug: true
    };

    function SimpleSlider(el, options) {
      this.settings = $.extend({}, this.settings, options);
      this.values = $.extend({}, this.values, options);
      this.$el = $(el);
      this.init(this.$el);
      el.addEventListener("touchstart", this.touchStart, false);
      el.addEventListener("touchmove", this.touchMove, false);
      el.addEventListener("touchend", this.touchEnd, false);
    }

    SimpleSlider.prototype.log = function(msg) {
      if (this.settings.debug) {
        return typeof console !== "undefined" && console !== null ? console.log(msg) : void 0;
      }
    };

    SimpleSlider.prototype.createControls = function($sliderArea) {
      var $nextBtn, $prevBtn, plugin;
      $prevBtn = $('<a href="#">' + this.settings.prevBtnText + '</a>');
      $nextBtn = $('<a href="#">' + this.settings.nextBtnText + '</a>');
      plugin = this;
      $nextBtn.click(function() {
        plugin.btnMoveLeft($(this));
        return false;
      });
      $prevBtn.click(function() {
        plugin.btnMoveRight($(this));
        return false;
      });
      $sliderArea.before($prevBtn);
      return $sliderArea.after($nextBtn);
    };

    SimpleSlider.prototype.btnMoveLeft = function($btn) {
      var element;
      element = this.$el.get(0);
      this.values.curX = this.values.curX - this.values.slideWidth;
      if (this.values.curX < this.values.max) {
        this.values.curX = 0;
      }
      return element.style.webkitTransform = 'translate3d(' + this.values.curX + 'px, 0, 0)';
    };

    SimpleSlider.prototype.btnMoveRight = function($btn) {
      var...