JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sliderSection">
			<div class="sliderWrapper">
				<div class="slider">
					<div class="slider_left"></div>
					<div class="slider_right"></div>
					<ul class="sliderItemWrapper">
						<li class="slider-item">
							<a href="#">
								<img src="http://www.imageup.ru/img231/2156888/look-02.jpg" alt="look" class="slider-img">
							</a>
							<div class="des-slide">
								<p class="model">Model 1</p>
								<p class="collection">Early Spring 2014</p>
								<hr class="hr-line">
								<ul class="price-table">
									<li>
										<b>Trui</b> - &#8364; 99.95
									</li>
									<li>
										<b>Overhemd</b> - &#8364; 99.95
									</li>
									<li>
										<b>Broek</b> - &#8364; 99.95
									</li>
								</ul>
								<button>Shop the look</button>
								<a href="#" class="delete">Delen</a>
								<a href="#" class="print">Printen</a>
							</div>
						</li>
						<li class="slider-item">
							<a href="#">
								<img src="http://www.imageup.ru/img231/2156888/look-02.jpg" alt="look" class="slider-img">
							</a>
							<div class="des-slide">
								<p class="model">Model 2</p>
								<p class="collection">Early Spring 2014</p>
								<hr class="hr-line">
								<ul class="price-table">
									<li>
										<b>Trui</b> - &#8364; 99.95
									</li>
									<li>
										<b>Overhemd</b> - &#8364; 99.95
									</li>
									<li>
										<b>Broek</b> - &#8364; 99.95
									</li>
								</ul>
								<button>Shop the look</button>
								<a href="#" class="delete">Delen</a>
								<a href="#" class="print">Printen</a>
							</div>
						</li>
						<li class="slider-item">
							<a href="#">
								<img src="http://www.imageup.ru/img231/2156888/look-02.jpg" alt="look" class="slider-img">
							</a>
							<div class="des-slide">
								<p class="model">Model 3</p>
								<p class="collection">Early Spring 2014</p>
								<hr class="hr-line">
								<ul...

CSS

.sliderSection {
	margin-bottom: 57px;
}

@media (max-width: 1024px) {
	.sliderSection {
		margin: 45px 0 44px 0;
	}
}

.sliderWrapper {
	margin: 20px auto;
	overflow: hidden;
	position: relative;
	min-width: 320px;
}

.slider {
	position: relative;
	max-width: 50%;
	margin: 0 auto;
	font-family:'HelveticaNeue-300';
}

.sliderItemWrapper {
	position: relative;
	margin: 0;
	padding: 0;
}

.slider-item {
	position: relative;
	display: inline-block;
	width: 25%;
	margin-left: -4px;
	text-align: center;
}


.slider_left, .slider_right {
	width: 30px;
	z-index: 2;
	cursor: pointer;
	height: 100%;
}

.slider_left {
	background: url("../assets/prev-slide.png") no-repeat 50% 40%;
	position: absolute;
	left: -15.5%;	
}

.slider_right {
	background: url("../assets/next-slide.png") no-repeat 50% 40%;
	position: absolute;
	right: -23.5%;
}


.opacity {
	background: #fff;
	opacity: 0.4;
	width: 100px;
	position: absolute;
	top: 0;
	bottom: 0;
}

.leftOpacity {
	left: -50%;
}

.rightOpacity {
	right: -50%;
}


.des-slide-hide {
	opacity: 0;
}

.des-slide-show {
	opacity: 1;
}

.des-slide {
	position: absolute;
	top: 28px;
	left: 75%;
	text-align: left;
	text-transform: none;
}

.des-slide a, button {
	text-transform: uppercase;
}

.model {
	color: #555;
	font-size: 36px;
}

.collection {
	color: #ff6600;
	font-size: 18px;
	line-height: 29px;
}

.hr-line {
	width: 72px;
	height: 1px;
	background: #ff6600;
	margin: 13px 0;
	margin: 13px 0 21px 0;
	border: none;
	text-align: left;
}

.price-table {
	list-style-type: none;
	font-size: 12px;
	margin-bottom: 30px;
}

.price-table li {
	color: #888;
	margin: 7px 0;
}

.price-table b {
	color: #555;
}

.des-slide button {
	width: 157px;
	height: 43px;
	background: #ff6600;
	border: none;
	color: #fff;
	font-size: 14px;
	margin-bottom: 7px;
	cursor: pointer;
}

.des-slide button:after {
	content: '';
	display: inline-block;
	width: 14px;
	height: 12px;
	background: url(../assets/sprite.png) no-repeat -182px -149px;
}

.des-slide...

JavaScript

(function($) {

	var methods = {
		init: function() {
			options = $.extend({
				showTime: 3000,
				slideAnimate: 1500
			}, options);
			var el = this,
			resize = 100,
			lengthSlides = $(el).find('.slider-item').length,
			widthSlides = lengthSlides * resize + '%',
			currentSlide = 1;
			$(el).find('.sliderItemWrapper').width(widthSlides);
				var inter = setInterval(nextSlide, options.showTime);
				$(el).hover(function() {
					clearInterval(inter);
				}, function() {
					inter = setInterval(nextSlide, options.showTime);
				});
				$(el).find('.slider_left').click(prevSlide);
				$(el).find('.slider_right').click(nextSlide);
				$(el).find('.slider-item:nth-child(2) .slider-img').addClass('small-img');
			},

			slideAnim: function() {
				$(el).find('.slider-img').removeClass('active-img slider-img-left', 1500, "easeOutSine");
				$(el).find('.des-slide').removeClass('des-slide-show', 1500, "easeOutSine");
				$(el).find('.des-slide').addClass('des-slide-hide', 500, "easeOutSine");
				$(el).find('.slider-img').addClass('small-img', 1500, "easeOutSine");
				$(el).find('.slider-item:nth-child('+currentSlide+') .slider-img').addClass('active-img slider-img-left', 1500, "easeOutSine");
				$(el).find('.slider-item:nth-child('+currentSlide+') .des-slide').addClass('des-slide-show', 1500, "easeOutSine");
			},

			nextSlide: function() {
				var currentSlide = 1;
				if ( currentSlide == lengthSlides )
					currentSlide = 0;
				$(el).find('.sliderItemWrapper').animate({
					'left': -currentSlide * resize + '%'
				}, options.slideAnimate);
				currentSlide++;
				slideAnim();
			},

			prevSlide: function() {
				currentSlide--;
				if ( currentSlide == 0 )
					currentSlide = lengthSlides;
				$(el).find('.sliderItemWrapper').animate({
					'left': -(currentSlide -1) * resize + '%'
				}, options.slideAnimate);
				slideAnim();
			}


	};

		 $.fn.slide = function(method) {
		 	return this.each(function() {
			
         if (methods[method]) {
         ...