JSFiddle - React, Tailwind, and code Playground

HTML

<section class="main-slide">
  <div class="tkp-slide tkp-slide--container">
    <div class="tkp-slide-item">
      <a href="javascript:void(0)">
        <img src="https://dummyimage.com/400x200/f2d9f2/080708&text=1" alt="Slide 1" />
      </a>
    </div>
    <div class="tkp-slide-item">
      <a href="javascript:void(0)">
        <img src="https://dummyimage.com/400x200/f2d9f2/080708&text=2" alt="Slide 2" />
      </a>
    </div>
    <div class="tkp-slide-item">
      <a href="javascript:void(0)">
        <img src="https://dummyimage.com/400x200/f2d9f2/080708&text=3" alt="Slide 3" />
      </a>
    </div>
    <div class="tkp-slide-item">
      <a href="javascript:void(0)">
        <img src="https://dummyimage.com/400x200/f2d9f2/080708&text=4" alt="Slide 4" />
      </a>
    </div>
    <div class="tkp-slide-item">
      <a href="javascript:void(0)">
        <img src="https://dummyimage.com/400x200/f2d9f2/080708&text=5" alt="Slide 5" />
      </a>
    </div>
    <ul>
      <li class="tkp-slide-btn tkp-slide-btn-prev">
        &#10094;
      </li>
      <li class="tkp-slide-btn tkp-slide-btn-next">
        &#10095;
      </li>
    </ul>
  </div>
</section>

SCSS

.tkp-slide{
  width:100%;
  position:relative;
  .tkp-slide-item{
    &:not(:first-child){
      display:none;
    }
    img{
      width:100%;
    }    
  }

  .tkp-slide-btn{
    color: #fff!important;
    background-color: #000!important;
    border: none;
    display: inline-block;
    outline: 0;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    opacity: 0.7;
    &:hover{
      background-color: lighten( #000, 20) !important;     
    }
  }
  .tkp-slide-btn-prev{
    position:absolute;
    top:50%;
    left:0%;
    transform:translate(0%,-50%);
    -webkit-transform:translate(0%,-50%);
    -ms-transform:translate(-0%,-50%);
  }
  .tkp-slide-btn-next{
    position:absolute;
    top:50%;
    right:0%;
    transform:translate(0%,-50%);
    -ms-transform:translate(0%,-50%);
  }
}

JavaScript

var TkpSlider = function (args) {
	args= args|| {};
    //private variable
     var btnPrev = args.btnPrev || "tkp-slide-btn-prev";//class for previous button (default: "tkp-slide-btn-prev")
    var btnNext = args.btnNext || "tkp-slide-btn-next";//class for next button (default: "tkp-slide-btn-next")
    var itemClass = args.itemClass || "tkp-slide-item"; //each item container class to slide (default: "tkp-slide-item")
    var isAutoSlide = args.isAutoSlide || false;//set auto slide (default: false)
    var autoSlideTimer = args.autoSlideTimer || 2000;//set auto slide timer when isAutoSlide is true(default: 2000)
    var hideBtnNav = args.hideBtnNav || false; //hide button navigation(default: false)
    var isRandom = args.isRandom || false; //whether next or previous slide should be random index
    var slideIndex = args.startIndex || 0; //start slide index number (zero based, index 0 = slide number 1, default :0)


    var itemNodes = document.getElementsByClassName(itemClass);
    var itemLength = itemNodes.length;
    var autoSlideInterval;

    //public variable
    this.testParentVar = "parent var";

    //init function
    init();
    function init() {
        if (itemLength > 0) {
            showSlide();
            bindEvent();
            isAutoSlide ? setAutoSlide() : "";
            hideBtnNav ? setHideBtnNav() : "";
        } else {
            throw "Cannot find slider item class";
        }

    }


    //private function
    function showSlide() {
        if (slideIndex >= itemLength) { slideIndex = 0; }
        if (slideIndex < 0) { slideIndex = (itemLength - 1); }
        for (var i = 0; i < itemLength; i++) {
            itemNodes[i].style.display = "none";
        }
        itemNodes[slideIndex].style.display = "block";
    }

    function nextPrevSlide(n) {
        slideIndex += n;
        showSlide();
    }

    function bindEvent() {
        var btnPrevNode = document.getElementsByClassName(btnPrev);
        if (btnPrevNode.length > 0) {
 ...