JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="slider">
	<div class="slider__window">

		<div class="slider__slider">

				<div class="slider__slide">
					<div class="el">1</div>
				</div>
				<div class="slider__slide">
					<div class="el">2</div>
				</div>
				<div class="slider__slide">
					<div class="el">3</div>
				</div>

		</div>


	</div>
</div>

CSS

*,
*:after,
*:before {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}


.slider.is-on {
	
}

.slider__window {
	overflow: hidden;	
}

.slider__slider {
	display: flex;
	transition: 10s linear;
	will-change: true;
	
}

.slider.is-on .slider__slider {
	
}

.slider__slide {
	flex: 0 0 200px;
	
}

.el {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: #fff;
	margin: 0 1em;
	background-color: #444;
	height: 160px;
}

JavaScript

var w = window,
    d = document,
    $html = d.documentElement,
    $body = d.body,
    qs = function(arg1, arg2) {
        if (arg2) {
            return (arg1).querySelector(arg2);
        }

        return d.querySelector(arg1);
    },
    qsa = function(arg1, arg2) {
        if (arg2) {
            return (arg1).querySelectorAll(arg2);
        }

        return d.querySelectorAll(arg1);
    },
    ael = function($el, evt, cb, uc) {
        if (!$el || !evt || !cb) return;

        if ($el !== w && $el.length) {
            $el.forEach(function($el) {
                $el.addEventListener(evt, cb, uc);
            });

            return true;
        }

        return $el.addEventListener(evt, cb, uc);
    },
	
	ael1 = function ($el, evt, cb, uc) {
		var cb_ = function () {
			cb();
			$el.removeEventListener(evt, cb_);
		};
		
		return ael($el, evt, cb_, uc);
	},

	transition_end_event = (function (){
	  var t,
		  el = document.createElement("fakeelement");

	  var transitions = {
		"transition"      : "transitionend",
		"OTransition"     : "oTransitionEnd",
		"MozTransition"   : "transitionend",
		"WebkitTransition": "webkitTransitionEnd"
	  }

	  for (t in transitions){
		if (el.style[t] !== undefined){
		  return transitions[t];
		}
	  }
	})();


var forceRedraw = function () {
	$html.offsetWidth;
};


//


var $slider = qs('.slider'),
	$slider__window = qs('.slider__window'),
	$slider__slider = qs('.slider__slider'),
	$slider__slideS = qsa('.slider__slide'),
	
	first_slide_in_line_idx = 0,
	
	$slider__first_slide_in_line = $slider__slideS[first_slide_in_line_idx],
	
	total_slides = $slider__slideS.length;
	

var width_of_slider_window = $slider__window.offsetWidth,
	width_of_slide = $slider__first_slide_in_line.offsetWidth,
	width_of_slides_combined = width_of_slide * total_slides,
	missing_occupation = width_of_slider_window - width_of_slides_combined,
	
	transition_duration =...