JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="slider">
  <li><img src="http://placehold.it/150x150/ff7755/ffffff" alt="" /></li>
  <li><img src="http://placehold.it/150x150/aa7755/ffffff" alt="" /></li>
  <li><img src="http://placehold.it/150x150/dd9955/ffffff" alt="" /></li>
  <li><img src="http://placehold.it/150x150/66aa55/ffffff" alt="" /></li>
</ul>

CSS

.slider_wrap {
  position:relative;
  overflow:hidden;
  margin:50px auto 0;
}

.SlideIt {
    position:absolute;
    top:0;
    left: 0;
    width:90000em;
  
}

.SlideIt > li{
  float:left;
}

JavaScript

(function($){
    
	// маленький костылик для уменьшения нагрузки на CPU
	var requestAnimationFrame = window.requestAnimationFrame || function(callback) {
	    callback();
	};
	
	
	var Slider = function(container, options) {
	    // Сохраняем ссылка на контейнер
	    this.$container = $(container);
		// Можете добавить каких-нибудь опций
		this.options = $.extend({
		    "delayTime": 2000, // задержка между кадрами
			"slideTime": 500 //скорость анимации
		}, options);
		// сохраняем список всех слайдов
		this.slides = this.$container.find('li');
		// Если есть что слайдить
		if (this.slides.length !== 0) {
		    // запускаем
			this.init();
		}
	};
	
	// добавляем нашему слайдеру методы
	Slider.prototype = $.extend(Slider.prototype, {
	   // тут мы будем биндить всякие ивенты и т.д.
	   "init": function() {
       
	       // добавим класс для оформления
		   this.$container.addClass('SlideIt');
	       // оборачиваем в контейнер и устанавливаем размер первого кадра
	       this.$container.wrap('<div class="slider_wrap" />').closest('.slider_wrap').css({
           // fixme
           "width": this.$container.find('li:first').width(),
			     "height": this.$container.find('li:first').height()
		   });
	       
		   // Тут можно отрисовать контролы.. но мне лень
		   // а еще мне лень считать каждый кадр
		   this.coords = [];
		   var sum = 0;
		   this.slides.each($.proxy(function(i, el) {
		       this.coords.push(sum);
			   sum += $(el).outerWidth(true);
		   }, this));
		   // зато мы укажем начальное положение
		   this.index = 0;
		   // и запустим анимацию
       this.slide();
	   },
    "slide": function() {
	       // сохраним контекст через $.proxy
		   // Заодно сохраним сслку на таймаут если вдруг захотим его отчистить
		   this.timeout = setTimeout($.proxy(function() {
		       // Сохраним немного CPU если браузер вдруг свернут
			   // и сразу поставим в очередь следующий кадр
			   requestAnimationFrame($.proxy(this.slide, this));
			   //...