JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div id="numbered-slider">
  <span id="prev">prev</span>
  <ul id="slider-wrap">
    <li>Content here</li>
    <li>Another slide</li>
    <li>More slides</li>
  </ul>
  <span id="next">next</span>
</div>

SCSS

#numbered-slider{
  ul#slider-wrap{
    li{
      display: none;
      &.active{
        display: block;
      }
    }
  }
  #prev,
  #next,
  ul#slider-nav li{
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
  }
  ul#slider-nav{
    padding: 0;
    li{
      float: left;
      list-style-type: none;
      padding: 5px;
      margin: 5px;
    }
  }
}

JavaScript

/**
 * Numbered Slider
 * @type {Object}
 * EXAMPLE USAGE:
 *
  <div id="numbered-slider">
    <span id="prev">prev</span>
    <ul id="slider-wrap">
      <li>Content here</li>
      <li>Another slide</li>
      <li>More slides</li>
    </ul>
    <span id="next">next</span>
  </div>
 */
var nSlider = {
  elem: $('#numbered-slider'), // Slider container
  sCount: 0,
  sCurrent: 0,
  timer: 5000, // set to false to disable
  interval: null,
  /**
   * Initialize build and hooks
   */
  init: function(){
    nSlider.sCount = $('ul#slider-wrap li',nSlider.elem).length;
    // If enough slides
    if(nSlider.sCount>0){
      $('ul#slider-wrap li:first',nSlider.elem).addClass('active');
      nSlider.sCurrent = 1;
      // Build UI
      nSlider.appendControls();
      // set click events
      $('#prev',nSlider.elem).click(nSlider.prevSlide);
      $('#next',nSlider.elem).click(nSlider.nextSlide);
      nSlider.hookControls();
      // Handle timer
      nSlider.setTimer();
    }
  },
  /**
   * Set and reset timer interval
   */
  setTimer: function(){
    if(typeof nSlider.timer === 'number'){
      window.clearInterval(nSlider.interval);
      nSlider.interval = window.setInterval(nSlider.nextSlide, nSlider.timer);
    }
  },
  /**
   * Resets active slide and switches to valid slider number
   * @param  {number} slide Slide number
   */
  goToSlide: function(slide){
    // If slide exists
    if($('ul#slider-wrap li:nth-child('+slide+')',nSlider.elem).length==1){
      var s = $('ul li:nth-child('+slide+')',nSlider.elem);
      // Reset states
      $('ul li.active',nSlider.elem).each(function(){
        $(this).removeClass('active');
      });
      // Update states
      s.addClass('active');
      nSlider.sCurrent = slide;
      // Reset timer
      nSlider.setTimer();
    }
  },
  /**
   * Goes to next slide with revert if needed
   */
  nextSlide: function(){
    var newSlide = nSlider.sCurrent+1;
    // Calc revert
    if(newSlide > nSlider.sCount){
     ...