JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<div class="viewport">
    <ul id="slider1">
        <li style="background: lightblue; color: red">1</li>
        <li style="background:gray; color: black;">2</li>
        <li style="background:pink; color: white;">3</li>
    </ul>

</div><button id='b1'>prev</button><button id='b2'>next</button>
<button id='inject'>inject another</button>
<hr />

<div class="viewport">
    <ul id="slider2">
        <li style="background: lightblue; color: red">1</li>
        <li style="background:gray; color: black;">2</li>
        <li style="background:pink; color: white;">3</li>
    </ul>

</div><button id='b3'>prev</button><button id='b4'>next</button>

CSS

.viewport { width: 100%; height: 300px; overflow:hidden; }
ul { list-style: none; margin: 0; padding: 0; position: relative; width: 10000%;  }
ul > li { display: block; float: left; width:1%; height: 300px; line-height: 300px; font-size: 30px; text-align: center; }
ul > li > ul {display:table; width:100%; min-width:100%; max-width:100%; border:1px solid #333; margin:0; padding:0;}
ul > li > ul li {display:table-cell; width:auto; margin:0; padding:0;}

JavaScript

/* slider 2 */
var _Slider = function(args) {
    if(args === undefined){
        throw new Error('Missing required arguments!');
    }
    slider = this;
    slider.id = args.id;
    slider.el = args.el;
    slider.duration = args.duration || 200;
    slider.speed = args.speed || 0;//pixels per second
    slider.cassette = document.getElementById(args.id);
    slider.slides = slider.cassette.getElementsByTagName('li');
    slider.controls = {
        buttonPrev : document.getElementById(args.prevButtonID),
        buttonNext : document.getElementById(args.nextButtonID)
    }
    slider.index = 0;

    return slider;
}
var computedStyle = function(element){
    return element.currentStyle || window.getComputedStyle(element)
    };
_Slider.prototype.resize = function(){
    if(this.speed>0){ widthOfNextSlide=parseInt(computedStyle(this.slides[this.index]).width);
relativeSpeed = widthOfNextSlide*(this.speed/1000);//
this.cassette.style.transition = 'all '+relativeSpeed+'ms ease-out';
                    }
    return;
    };
_Slider.prototype.count = function(){
    return this.slides.length;
    };

_Slider.prototype.hmm = function(){
    var nodes = this.cassette.getElementsByTagName('li');
    nodes = Array.prototype.slice.call(nodes);
    nodes = nodes.filter(function(v, i){
        return v.parentElement === this.cassette; 
    });
    return nodes;
    };
_Slider.prototype.next = function(){
      if(this.index+1<this.count()){
            this.index++;
            this.cassette.style.left = "-"+this.index*100+'%';
          


        }
    };
_Slider.prototype.prev = function(){
        if(this.index>0){            
            
this.index--;   
this.cassette.style.left = "-"+this.index*100+'%';


            
        }
    };


var Slider = function(args) {
    if(args === undefined){
        throw new Error('Missing required arguments!');
    }
    var thisSlider = new _Slider(args);
        thisSlider.cassette.style.transition = 'all...