JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="JS_mainBnr">

  <ul class="img">

    <li>
      <a href="/_wg/import/afsmall.html"><img src="/_wg/img/JS_mainBnr/06P.jpg" alt=""></a>
    </li>
    <li>
      <a href="/_wg/import/benefit.html"><img src="/_wg/img/JS_mainBnr/08O.jpg" alt=""></a>
    </li>
    <li>
      <a href="/_wg/import/newcontent2.html"><img src="/_wg/img/JS_mainBnr/09J.jpg" alt=""></a>
    </li>

  </ul>

  <div id="outer">
    <ul class="btn">
      <li>
        <a href="/_wg/import/afsmall.html"><img src="/_wg/img/JS_mainBnr/01thumba.jpg" width="257px" height="105px"></a>
      </li>
      <li>
        <a href="/_wg/import/benefit.html"><img src="/_wg/img/JS_mainBnr/02thumba.jpg" width="257px" height="105px"></a>
      </li>
      <li>
        <a href="/_wg/import/newcontent2.html"><img src="/_wg/img/JS_mainBnr/03thumba.jpg" width="257px" height="105px"></a>
      </li>


    </ul>
  </div>

  <ul class="DB_dir">
    <span class="arrow prev"></span>
    <span class="arrow next"></span>
  </ul>
</div>

CSS

.JS_mainBnr {
  margin-top: -283px;
  z-index: 1;
  width: 100%;
  height: 369px/;
  overflow: hidden;
  margin: 0 auto;
  text-align: center
}

.JS_mainBnr .img {
  position: relative;
  margin: 0 auto;
  width: auto;
  height: 100%;
}

.JS_mainBnr .img:after {
  content: "";
  display: block;
  clear: both;
}

.JS_mainBnr .img li {
  position: absolute;
  top: 0;
  left: 50%!important;
  width: 5000px;
  height: auto;
  margin-left: -2500px;
  text-align: center;
}

.JS_mainBnr .img li a {
  width: 5000px;
  height: auto;
  display: inline-block
}

.JS_mainBnr .img li:first-child {
  z-index: 1;
}


/* Button */

.JS_mainBnr .btn {
  z-index: 3;
  position: absolute;
  top: 0px;
  letter-spacing: -4px;
  top: 0;
  left: 50%!important;
  width: 5000px;
  height: 100%;
  margin-left: -2630px;
  text-align: center;
}

.JS_mainBnr .btn:after {
  content: "";
  display: block;
  clear: both;
}

.JS_mainBnr .btn li {
  position: relative;
  *zoom: 1;
  padding: 0 0;
  background: rgba(255, 255, 255, .5);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.10);
  color: #333;
  font-size: 12px;
  cursor: pointer;
  letter-spacing: 0;
  transition: all .2s ease;
  -webkit-transition: all .2s ease;
  width: 257px;
  margin-left: 60%;
}

.JS_mainBnr:hover .btn li {
  background: rgba(0, 0, 0, .1);
}

.JS_mainBnr:hover .btn li img {
  opacity: 0.3
}

.JS_mainBnr .btn li.on {
  z-index: 1;
  background: rgba(255, 255, 255, .9) color:#fff;
}

.JS_mainBnr:hover .btn li.on img {
  opacity: 1
}


/* Arrow */

.JS_mainBnr .prev {
  position: absolute;
  top: 285px;
  left: 515px;
  width: 21.5px;
  height: 30px;
  background: url('/_wg/img/_arrow/arrowL_50.gif') no-repeat 50% 50% rgba(255, 255, 255, .2);
  opacity: 0;
  -webkit-opacity: 0;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  background-size: 18px 27px;
}

JavaScript

(function($) {

    $.fn.DB_tabArrowSlideMove2 = function(options) {
      var opt = {
        motionType: 'fade',
        motionSpeed: 300,
        autoRollingTime: 3000,
        videoRollingTime: 6000,
        arrowVisible: true,
        overRolling: false,
        random: false,
        yt_player: []
      };

      $.extend(opt, options);
      return this.each(function() {
          var $this = $(this);
          var $img = $this.find('.img');
          var $img_li = $img.find('> li');
          var $arrow = $this.find('.arrow');
          var $next = $this.find('.next');
          var $prev = $this.find('.prev');
          var $auto = $this.find('.auto');
          var len = $img_li.length;
          //console.log(len);
          var $btn = $this.find('.btn');
          if (len == 1) {
            $next.hide();
            $prev.hide();
            $btn.hide();
            return;
          }
          if ($btn.find('li').length == 0) {
            for (var i = 0; i < len; i++) {
              $btn.append('<li class=n' + (i + 1) + '><span>' + (i + 1) + '</span></li>');
            };
          };
          var $btn_li = $btn.find('> li');
          var current = 0;
          var oldCurrent = 0;
          var dir = 'next';
          var random = opt.random;
          if (random) {
            current = Math.floor(Math.random() * len);
            oldCurrent = current;
            dir = 'random';
          };

          var timerId = 0;
          var timer = 0;
          var autoPlay = true;
          var arrowOver = false;
          var imgWidth = $img_li.width();
          var imgHeight = $img_li.height();
          var overRolling = opt.overRolling;
          var arrowVisible = opt.arrowVisible;
          var motionType = opt.motionType;
          var motionSpeed = opt.motionSpeed;
          var autoRollingTime = opt.autoRollingTime;
          var videoRollingTime = opt.videoRollingTime;
          var mOver = false;

          //
          var $window =...