JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<div class="slider controls bodyclass animated">
    <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

var $;

$ = jQuery;

$.fn.extend({
  simpleSlider: function(options) {
    var btnMoveLeft, btnMoveRight, createControls, init, log, settings, values;
    values = {
      startX: 0,
      curX: 0,
      oldX: 0,
      slideCount: 0,
      slideWidth: 0,
      hasControls: false,
      slider: null
    };
    settings = {
      prevBtnText: "Previous slide",
      nextBtnText: "Next slide",
      debug: true
    };
    settings = $.extend(settings, options);
    log = function(msg) {
      if (settings.debug) {
        return typeof console !== "undefined" && console !== null ? console.log(msg) : void 0;
      }
    };
    createControls = function($sliderArea) {
      var $nextBtn, $prevBtn;
      $prevBtn = $('<a href="#">' + settings.prevBtnText + '</a>');
      $nextBtn = $('<a href="#">' + settings.nextBtnText + '</a>');
      $nextBtn.click(function() {
        btnMoveLeft($(this));
        return false;
      });
      $prevBtn.click(function() {
        btnMoveRight($(this));
        return false;
      });
      $sliderArea.before($prevBtn);
      return $sliderArea.after($nextBtn);
    };
    btnMoveLeft = function($btn) {
      var element;
      element = values.slider.get(0);
      values.curX = values.curX - values.slideWidth;
      if (values.curX < values.max) {
        values.curX = 0;
      }
      return element.style.webkitTransform = 'translate3d(' + values.curX + 'px, 0, 0)';
    };
    btnMoveRight = function($btn) {
      var element;
      element = values.slider.get(0);
      values.curX = values.curX + values.slideWidth;
      if (values.curX > 0) {
        values.curX = values.max;
      }
      return element.style.webkitTransform = 'translate3d(' + values.curX + 'px, 0, 0)';
    };
    init = function($el) {
      var $sliderArea, $slides, sliderWidth;
      values.slider = $el;
      $el.wrap('<div class="slider-area">');
      $sliderArea = $el.parents('.slider-area').first();
      $slides = $el.find('.slide');
     ...