JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider">
		<div class="slide-list">
			<div class="slide-wrap">
				<div class="slide-item #slide0">
					<img alt="" src="http://www.howtomake.com.ua/wp-content/uploads/2012/07/img-1.jpg">
					<span class="slide-title">Первый слайд</span>
				</div>
				<div class="slide-item">
					<img alt="" src="http://www.howtomake.com.ua/wp-content/uploads/2012/07/img-2.jpg">
					<span class="slide-title">второй слайд</span>
				</div>
				<div class="slide-item">
					<img alt="" src="http://www.howtomake.com.ua/wp-content/uploads/2012/07/img-3.jpg">
					<span class="slide-title">Третий слайд</span>
				</div>
				<div class="slide-item">
					<img alt="" src="http://www.howtomake.com.ua/wp-content/uploads/2012/07/img-4.jpg">
					<span class="slide-title">Четвертый слайд</span>
				</div>
				<div class="slide-item">
					<img alt="" src="http://www.howtomake.com.ua/wp-content/uploads/2012/07/img-5.jpg">
					<span class="slide-title">Пятый слайд</span>
				</div>
			</div>
			<div class="clear"></div>
		</div>
		<div class="navy prev-slide" name="prev"></div>
		<div class="navy next-slide" name="next"></div>
	</div>
<p class="nav">
<a href="#slide0" id="slide0" class="">1</a>
<a href="#slide1" id="slide1" class="">2</a>
<a href="#slide2" id="slide2" class="">3</a>
</p>

CSS

/* = Общие стили HTM */
body {
	padding: 0 0 50em 0;
	margin: 0;
	font: 14px/1.8 Helvetica;
	color: #444;
	background-color: #dbdbdb;
}
a {text-decoration: none;}

header {
	display: block;
	position: relative; 
	margin: 0; 
	background: #f9f9f9;
}		
.back { font:normal 3em 'Agency FB'; color: #0074A3; position:absolute; top: 10px; right: 10%;}
.back:hover {text-decoration: underline;}
h1 {margin: 0 0 0 2em;}
h1 a { display: inline-block; font: normal 3em 'Agency FB'; text-decoration: none; }
.how { color: #990000; }
.to { color: #0074A3; }
.make { color: #006600; }
.demo { font: normal 2em 'Agency FB';}

/* main */
#main {
	width: 94%;
	padding: 1% 3%;
	
}
#main h1 { 
	text-align: center;
	font: 2em Helvetica; 
	margin: 20px 0 10px 0;
	padding-bottom: 15px;
	border-bottom: 2px solid #444444; 
}
/* Задаем сброс обтекания */
.clear {
	margin-top: -1px;
	height: 1px;
	clear:both;
	zoom: 1;
}		
/* Slider */
.slider {
	/* Ширина контейнера */
	width: 300px;
	/* Внешние тступы сверху и снизу */
	margin: 50px auto;
	/* Внутренние отступы для ссылок navy */
	padding: 0 30px;
	/* Позиционирование */
	position: relative;
	/* Скроем то что выходит за границы */
	overflow: hidden;
}
/* Двойной клик по ссылкам вперед/назад вызывает выделение всех элементов слайдера,
поэтому предотвращаем это */
.slider::-moz-selection { background: transparent; color: #fff; text-shadow: none; }
.slider::selection { background: transparent; color: #fff; text-shadow: none; }

.slide-list {
	position: relative;
	margin: 0;
	padding: 0;
}
.slide-wrap {
	position: relative;
	left: 0px;
	top: 0;
	/* максимально возможная ширина обертки слайдера */
	width: 10000000px;
}
.slide-item {
	/* Ширина слайда */
	width: 380px;
	/* Внутренние отступы */
	padding: 10px;
	/* Обтекание */
	float: left;
}
.slide-title {
	/* Шрифт */
	font: bold 16px monospace;
	/* Указываем, что элемент блочный */
	display: block;
}

/* навигация вперед/назад */
.navy {
	/* абсолютное позиционирование */
	position:...

JavaScript

jQuery(document).ready(function(){
	
//// ---> Проверка на существование элемента на странице
jQuery.fn.exists = function() {
   return jQuery(this).length;
}

//// ---> Слайдер
$(function(){
  if($('.slider').exists()) {

    $('.slider').each(function(){

      var slider = $(this);

      var slideWrap = slider.find('.slide-wrap'),
          nextLink = slider.find('.next-slide'),
          prevLink = slider.find('.prev-slide'),
          slideWidth = slider.find('.slide-item').outerWidth(),
          scrollSlider = slideWrap.position().left - slideWidth;

      /* Клик по ссылке на следующий слайд */
      nextLink.click(function(){
        if(!slideWrap.is(':animated')) {
          slideWrap.animate({left: scrollSlider}, 500, function(){
            slideWrap
              .find('.slide-item:first')
              .appendTo(slideWrap)
              .parent()
              .css({'left': 0});
            });
          }
       });

      /* Клик по ссылке на предыдующий слайд */
      prevLink.click(function(){
      if(!slideWrap.is(':animated')) {
        slideWrap
          .css({'left': scrollSlider})
          .find('.slide-item:last')
          .prependTo(slideWrap)
          .parent()
          .animate({left: 0}, 500);
        }
      });

    });

  }

});

});