JSFiddle - React, Tailwind, and code Playground

HTML

<div class='rSlider'>

    <!-- begin rSlider--view -->
    <div class='rSlider--view'>


      <!-- slide -->
      <div class='rSlider--slide'>
        <div class='rSlider--container'>

          <div class='slide-styled'>
            <h2>BIG FONT <br/> BEST DESIGN</h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br/>
              Neque hic, maiores dicta atque suscipit saepe quis quisquam? <br/>
              Deleniti voluptatem assumenda omnis ipsa repellendus quidem, dolore, nihil pariatur, asperiores corporis perspiciatis?
            </p>
            <a href=''>KNOW SOMETHING ELSE</a>
          </div>

        </div>
        <div class='rSlider--image'><img src='https://unsplash.it/1300/689?image=1004' /></div>
        <div class='rSlider--bg-color'></div>
      </div>


      <!-- slide -->
      <div class='rSlider--slide'>

        <div class='rSlider--container'>

          <div class='slide-styled'>
            <h2>ANOTHER HUGE</h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br/>
              Neque hic, maiores dicta atque suscipit saepe quis quisquam?
            </p>
            <a href=''>KNOW SOMETHING ELSE</a>
         
          </div>

        </div>

        <div class='rSlider--image'><img src='https://unsplash.it/1300/648?image=1003' /></div>
        <div class='rSlider--bg-color'></div>

      </div>


      <!-- slide -->
      <div class='rSlider--slide'>

        <div class='rSlider--container'>

          <div class='slide-styled'>
            <h2>SOME WORDS</h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br/>
              Neque hic, maiores dicta atque suscipit saepe quis quisquam?
            </p>
            <a href=''>BUTTON</a>
            <a href=''>SOMETHING</a>
          </div>

        </div>

        <div class='rSlider--image'><img src='https://unsplash.it/600/1067?image=1002' /></div>
  ...

CSS

/*
  # ----- Script info:
  - Author: Michael Mammoliti
  - Name: rSlider.js
  - Version: 0.2.1
  - js dipendencies: jQuery
  - Release date: 8 February 2016
  - GitHub: https://github.com/MichaelMammoliti/rSlider.js

  # ----- Contact info
  - GitHub: https://github.com/MichaelMammoliti
  - Mail: mammoliti.michael@gmail.com
  - Twitter: @MichMammoliti

  # ----- License Info
  - Released under the GPL v3 license.
*/







.rSlider { overflow: hidden; width: 100%; position: relative; background: #000; }
.rSlider > .rSlider--view { width: 1000%; overflow: hidden; display: block; overflow: hidden; }
.rSlider > .rSlider--view:before { content: " "; display: block; }
.rSlider > .rSlider--view > .rSlider--slide { float: left; overflow: hidden; position: relative; display: block; overflow: hidden; }
.rSlider > .rSlider--view > .rSlider--slide:before { content: " "; display: block; }
.rSlider > .rSlider--view > .rSlider--slide > .rSlider--image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center center; z-index: 0; }
.rSlider > .rSlider--view > .rSlider--slide > .rSlider--container { padding: 150px 100px; max-width: 1200px; margin: auto; width: 100%; position: relative; z-index: 2; top: 50%; left: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); display: block; overflow: hidden; }
.rSlider > .rSlider--view > .rSlider--slide > .rSlider--container:before { content: " "; display: block; }
.rSlider > .rSlider--view > .rSlider--slide > .rSlider--bg-color { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.rSlider > .rSlider--dots-controls { padding: 20px; position: absolute; bottom: 0; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); z-index: 2; display: block; overflow: hidden; }
.rSlider > .rSlider--dots-controls:before { content: " ";...

JavaScript

(function(){

  var pluginName  = "rSlider",
      defaults    = {
        currentSlide: 1,
        defaultSlide: 4,
        delay: 5000,
        height: undefined,
        width: undefined,
        minHeight: 500,
        automatic: true,
        dirButtons: true,
        dirButtonNext: ">",
        dirButtonPrev: "<",
        transitions: true
      };

  var Plugin = function(context, options)
  {

    // - DOM elements
    this.$context   = $(context);
    this.$view      = this.$context.find(".rSlider--view");
    this.$slides    = this.$view.find(".rSlider--slide");
    this.$images    = this.$slides.find(".rSlider--image");
    this.$container = this.$slides.find(".rSlider--container");
    this.$dotsControls  = this.$context.find(".rSlider--dots-controls");
    this.$arrowControls  = this.$context.find(".rSlider--arrow-controls");

    // - properties caching
    this.slidesLen    = this.$slides.length;

    // - settings
    this.settings = $.extend(defaults, options);

    // - Style caching
    this.w = this.settings.width || this.$context.width();
    this.h = this.settings.height || this.$context.height();

    // - Timers
    this.delayTimer = undefined;
    this.resizeTimer  = undefined;

    // - Init
    this.init();
  };

  var pluginProto = {

    init: function()
    {
      var self = this;

      if(self.settings.currentSlide !== self.settings.defaultSlide)
        self.setSlide(self.settings.defaultSlide)

      self.events();
      self.setStyle();
      self.startAutomaticMovement();
      self.setDotsControls();
      self.setArrowControls();
      self.activateButton( self.settings.currentSlide );
      self.fixSlideHeight();
      self.moveSlide();
      self.setAnimations();
    },

    calculateMargin: function()
    {
      var self    = this,
          margin  = -self.settings.currentSlide * self.w;

      return margin;
    },

    startAutomaticMovement: function()
    {
      var self    = this,
          moving  = function()
  ...