JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page">  

  <section role="main">  
  <header role="branding">  
  <hgroup>  
  <h1>Adaptor</h1>  
  <h2>jQuery 3D слайдер и слайдшоу</h2>  
  </hgroup>  
  </header>  

  <div id="viewport-shadow">  

  <a href="#" id="prev"></a>  
  <a href="#" id="next"></a>  

  <div id="viewport">  
  <div id="box">  
  <figure class="slide">  
  <img src="http://baksomagnit.com/TEMPbanners/r728g.gif">  
  </figure>  
  <figure class="slide">  
  <img src="http://baksomagnit.com/TEMPbanners/L2-728.gif">  
  </figure>  
  <figure class="slide">  
  <img src="3.jpg">  
  </figure>  
  <figure class="slide">  
  <img src="4.jpg">  
  </figure>  
  <figure class="slide">  
  <img src="5.jpg">  
  </figure>  
  </div>  
  </div>  

  <div id="time-indicator"></div>  
  </div>  

  <footer>  
  <nav class="slider-controls">  
  <ul id="controls">  
  <li><a class="goto-slide current" href="#" data-slideindex="0"></a></li>  
  <li><a class="goto-slide" href="#" data-slideindex="1"></a></li>  
  <li><a class="goto-slide" href="#" data-slideindex="2"></a></li>  
  <li><a class="goto-slide" href="#" data-slideindex="3"></a></li>  
  <li><a class="goto-slide" href="#" data-slideindex="4"></a></li>  
  </ul>  
  </nav>  
  </footer>  
  </section>  

<aside id="effect-switcher">  
  <h2>Выбирите эффект</h2>  
  <ul id="effect-list">  
  <li><a href="#" class="effect current" data-fx="scrollVert3d">Верт. 3D</a></li>  
  <li><a href="#" class="effect" data-fx="scrollHorz3d">Горизонт. 3D</a></li>  
  <li><a href="#" class="effect" data-fx="scrollVert">Вертик. </a></li>  
  <li><a href="#" class="effect" data-fx="scrollHorz">Горизонт.</a></li>  
  <li><a href="#" class="effect" data-fx="blindLeft">Жалюзи</a></li>  
  <li><a href="#" class="effect" data-fx="blindDown">Фрагменты</a></li>  
  <li><a href="#" class="effect" data-fx="fade">Исчезание</a></li>  
  </ul>  
  </aside>  
   
  </div>

CSS

<link href='http://fonts.googleapis.com/css?family=Russo+One' rel='stylesheet'>  
  <style>  
/* line 17, ../../../.rvm/gems/ruby-1.8.7-p358/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */  
html, body, div, span, applet, object, iframe,  
h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
a, abbr, acronym, address, big, cite, code,  
del, dfn, em, img, ins, kbd, q, s, samp,  
small, strike, strong, sub, sup, tt, var,  
b, u, i, center,  
dl, dt, dd, ol, ul, li,  
fieldset, form, label, legend,  
table, caption, tbody, tfoot, thead, tr, th, td,  
article, aside, canvas, details, embed,  
figure, figcaption, footer, header, hgroup,  
menu, nav, output, ruby, section, summary,  
time, mark, audio, video {  
  margin: 0;  
  padding: 0;  
  border: 0;  
  font: inherit;  
  font-size: 100%;  
  vertical-align: baseline;  
}  

/* line 22, ../../../.rvm/gems/ruby-1.8.7-p358/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */  
html {  
  line-height: 1;  
}  

/* line 24, ../../../.rvm/gems/ruby-1.8.7-p358/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */  
ol, ul {  
  list-style: none;  
}  

/* line 26, ../../../.rvm/gems/ruby-1.8.7-p358/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */  
table {  
  border-collapse: collapse;  
  border-spacing: 0;  
}  

/* line 28, ../../../.rvm/gems/ruby-1.8.7-p358/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */  
caption, th, td {  
  text-align: left;  
  font-weight: normal;  
  vertical-align: middle;  
}  

/* line 30, ../../../.rvm/gems/ruby-1.8.7-p358/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */  
q, blockquote {  
  quotes: none;  
}  
/* line 103, ../../../.rvm/gems/ruby-1.8.7-p358/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */  
q:before, q:after, blockquote:before,...

JavaScript

<script type="text/javascript" src="http://stock-exchange.ucoz.com/js/jquery-1.7.2.js"></script>  
  <script src="box_slider.js"></script>  
  <script>  

  $(function () {  

  var $box = $('#box')  
  , $indicators = $('.goto-slide')  
  , $effects = $('.effect')  
  , $timeIndicator = $('#time-indicator')  
  , slideInterval = 5000;  

  var switchIndicator = function ($c, $n, currIndex, nextIndex) {  
  $timeIndicator.stop().css('width', 0);  
  $indicators.removeClass('current').eq(nextIndex).addClass('current');  
  };  

  var startTimeIndicator = function () {  
  $timeIndicator.animate({width: '680px'}, slideInterval);  
  };  

  // initialize the plugin with the desired settings  
  $box.boxSlider({  
  speed: 1000  
  , autoScroll: true  
  , timeout: slideInterval  
  , next: '#next'  
  , prev: '#prev'  
  , pause: '#pause'  
  , effect: 'scrollVert3d'  
  , blindCount: 25  
  , onbefore: switchIndicator  
  , onafter: startTimeIndicator  
  });  

  startTimeIndicator();  

  // pagination isn't built in simply because it's easy to  
  // roll your own with the plugin API methods  
  $('#controls').on('click', '.goto-slide', function (ev) {  
  $box.boxSlider('showSlide', $(this).data('slideindex'));  
  ev.preventDefault();  
  });  

  $('#effect-list').on('click', '.effect', function (ev) {  
  var $effect = $(this);  

  $box.boxSlider('option', 'effect', $effect.data('fx'));  
  $effects.removeClass('current');  
  $effect.addClass('current');  

  switchIndicator(null, null, 0, 0);  
  ev.preventDefault();  
  });  

  });  
</script>