JSFiddle - React, Tailwind, and code Playground

HTML

<section class="slider_block two" data-device="mouse">
			<ul class="slider_list">
				<li class="slider_item" style="background-image: url(img/1.jpg);">
					<h2 class="slider_item_header">
						Новое поступление только для наших клиентов. Купи на 5000 рублей и получи дополнительную скидку в размере 5000 рублей.
					</h2>					
				</li>
				<li class="slider_item" style="background-image: none;">
					<figure class="slider_item_content info">
						<img src="img/some_foto.jpg" alt="" class="rms_slider_content_img">
						<figcaption>
							<h2>Chack Noris</h2>
							<p>
								Основатель компании "ТЕХНОКОН-Новосибирск". Учеридитель ГАЗПРОМА и прочей херни.
							</p>
						</figcaption>
					</figure>					
				</li>
				<li class="slider_item" style="background-image: url(img/2.jpg);">
					<figure class="slider_item_content link">
						<figcaption>
							<h2>Презентация курса</h2>
							<p>
								Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis aliquid odit quas, quisquam laudantium facilis ratione eveniet iste quam, repudiandae illo dolor veritatis illum inventore minima adipisci perferendis, voluptate modi!
							</p>
						</figcaption>
						<a href="http://tehnokon.com" data-slider="link">Записаться на курс</a>								
					</figure>					
				</li>
				<li class="slider_item" style="background-image: url(img/3.jpg);">
					<ul class="slider_item_list">
						<li>
							<img src="img/partners/lg.jpg" alt="">
						</li>
						<li>
							<img src="img/partners/megafon.jpg" alt="">
						</li>
						<li>
							<img src="img/partners/rostelecom.jpg" alt="">
						</li>
						<li>
							<img src="img/partners/mcdonalds.jpg" alt="">
						</li>
						<li>
							<img src="img/partners/danone.jpg" alt="">
						</li>
					</ul>					
				</li>
				<li class="slider_item" style="background-image: url(img/4.jpg);"></li>
			</ul>
			<button data-sliderControl="left">
				<svg viewBox="0 0 500 500">
					<polygon points="295.1,350...

CSS

* {padding: 0;margin: 0;list-style-type: none;text-decoration: none;outline: none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;box-sizing: border-box;}
html,body {width: 100%;}
img {display: block;width: 100%;}

a {
	display: block;
	width: 40%;
	border:1px solid #f0b21b;
	margin: 0 auto;
	color: #f0b21b;
	padding: 10px 0px;
}

a:hover {
	background-color: #f0b21b;
	color: #fff;
}

section.slider_block {
	background-color: #ffffff;
	width: 100%;
	min-height: 400px;
	overflow: hidden;
	position: relative;
}

section.slider_block .slider_list {
/*	position: absolute;
	top: 0;
	left: 0;*/
	cursor: default;
	-webkit-user-select: none;
	   -moz-user-select: none;
	   -ms-user-select: none;
	     -o-user-select: none;
	     	user-select: none;
}
section.slider_block .slider_list.move {
	cursor: move;
}

section.slider_block .slider_list:after {content: "";display: block;width: 0;height: 0;clear: both;}
section.slider_block .slider_list .slider_item {
	float: left;
	-webkit-background-size:cover;
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center;
	height: 400px;
	position: relative;
	text-align: center;
}

section.slider_block .slider_list .slider_item .slider_item_header {
	width: 80%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #fff;
}

section.slider_block .slider_list .slider_item .slider_item_content {
	width: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);	
}

section.slider_block .slider_list .slider_item .slider_item_content h2, 
section.slider_block .slider_list .slider_item .slider_item_content p {
	margin-bottom: 5%;
}

section.slider_block .slider_list .slider_item .slider_item_content.info img,
section.slider_block .slider_list .slider_item .slider_item_content.info svg {
	border-radius: 50%;
	width: 20%;
	margin: 0 auto;
	margin-bottom: 5%;
}

section.slider_block .slider_list...

JavaScript

var _RMS = (function() {
"use strict";
/*--------------------------------вспомогательные объекты-----------------------------------------------*/
	function _CROSS_EVENTS(element, type, func) { // объект кроссбраузерных событий
		this.add = function(element, type, func) {
			if(typeof addEventListener !== 'undefined') {
				element.addEventListener(type, func, false);
			} else if(typeof attachEvent !== 'undefined') {
				element.attachEvent('on' + type, func);
			} else {
				element['on' + type] = func;
			}
		},
		this.default = function(e) {
			if(typeof e.preventDefault !== 'undefined') {
				e.preventDefault();
			} else {
				e.returnValue = false;
			}
		},
		this.remove = function(element, tp, func) {
			if(typeof removeEventListener !== 'undefined') {
				element.removeEventListener(tp, func, false);
			} else if(typeof detachEvent !== 'undefined') {
				element.detachEvent('on' + tp, func);
			} else {
				element['on' + tp] = null;
			}
		}
	};

	var _crossy = new _CROSS_EVENTS();

/*--------------------------------СЛАЙДЕР-----------------------------------------------*/

	var _EVENTS_TYPE = {
		//объект который содержит типы событий, в зависимости от типа устройства.
		//тип устройства получает функция _getEvenetsType() из data атрибута section.slider_block - data-device
			start: '',
			move: '',
			end: '',
			resize: 'resize',
			transitionend: 'transitionend'
		};

	function _SLIDER() {
        this.bullets = false,
        this.arrows = false,
        this.dragDrop = false,
        this.autoSwitch = false,
        this.deadZone = false,
        this.standartDuration = 100
	}

	_SLIDER.INIT = function(element, params) {
		_sliderSize(element);
		var  slider = new _SLIDER();
		slider.element = element.querySelector('.slider_list');
		_setOptions(slider, params);
		_getEvenetsType(element);

		function _sliderStart(e) {
            e = e || window.e;

	        if (slider.action && !slider.element) return;

			if (!slider.dragDrop) return;

	       ...