jQuery 3D слайдер и слайдшоу

<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="1.jpg">  
  </figure>  
  <figure class="slide">  
  <img src="2.jpg">  
  </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>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.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>

<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, blockquote:after {  
  content: "";  
  content: none;  
}  

/* line 32, ../../../.rvm/gems/ruby-1.8.7-p358/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */  
a img {  
  border: none;  
}  

/* line 116, ../../../.rvm/gems/ruby-1.8.7-p358/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */  
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {  
  display: block;  
}  

/* line 5, sass/screen.scss */  
html {  
  background: url(img/page-bg.png) repeat-x #333333;  
  font: 0.85em/1 "Russo One", Helvetica, Arial, sans-serif;  
  color: #999;  
}  

/* line 11, sass/screen.scss */  
header {  
  margin: 20px 140px;  
}  

/* line 12, sass/screen.scss */  
h1 {  
  font-size: 48px;  
  color: #2edbac;  
  text-transform: uppercase;  
}  

/* line 13, sass/screen.scss */  
h2 {  
  font-size: 22px;  
  color: #555;  
}  

/* line 14, sass/screen.scss */  
a {  
  color: #2edbac;  
  text-decoration: none;  
}  

/* line 15, sass/screen.scss */  
a:hover {  
  border-bottom: solid 1px #2edbac;  
}  

  #page {  
  width: 960px;  
  margin: 0 auto;  
}  

/* line 22, sass/screen.scss */  
#viewport-shadow {  
  position: relative;  
  width: 680px;  
  padding: 0 140px 70px;  
  background: url(img/box-shadow.png) bottom no-repeat;  
}  

/* line 29, sass/screen.scss */  
#viewport, #box, .slide {  
  width: 680px;  
  height: 460px;  
}  

/* line 34, sass/screen.scss */  
#viewport {  
  overflow: hidden;  
}  

/* line 35, sass/screen.scss */  
footer {  
  margin: 0 140px;  
}  

/* line 37, sass/screen.scss */  
#controls {  
  position: relative;  
  top: -40px;  
  float: right;  
  overflow: hidden;  
}  
/* line 44, sass/screen.scss */  
#controls li {  
  display: inline;  
}  

/* line 48, sass/screen.scss */  
.goto-slide {  
  margin-left: 10px;  
  width: 14px;  
  height: 14px;  
  display: block;  
  float: left;  
  border: solid 1px #000;  
  background-color: #555;  
  border-radius: 8px;  
  -webkit-box-shadow: inset 0px 0px 8px #333;  
  -moz-box-shadow: inset 0px 0px 8px #333;  
  box-shadow: inset 0px 0px 8px #333;  
}  
/* line 62, sass/screen.scss */  
.goto-slide.current {  
  background-color: #2edbac;  
}  

/* line 66, sass/screen.scss */  
#next, #prev {  
  position: absolute;  
  top: 80px;  
  width: 30px;  
  height: 300px;  
  background: url(next-prev-sprite.png) no-repeat;  
  display: block;  
  -webkit-transition: background .4s;  
  -moz-transition: background .4s;  
  transition: background .4s;  
}  
/* line 78, sass/screen.scss */  
#next:hover, #prev:hover {  
  background: url(next-prev-sprite-hover.png) no-repeat;  
  border: none;  
}  

/* line 85, sass/screen.scss */  
#prev {  
  left: 90px;  
}  

/* line 86, sass/screen.scss */  
#next, #next:hover {  
  left: 840px;  
  background-position: -30px 0;  
}  

/* line 90, sass/screen.scss */  
#effect-switcher h2 {  
  border-bottom: solid 1px #555;  
  margin: 0 0 10px;  
}  

/* line 97, sass/screen.scss */  
#effect-list {  
  overflow: hidden;  
}  
/* line 99, sass/screen.scss */  
#effect-list li {  
  display: inline;  
}  

/* line 102, sass/screen.scss */  
.effect, .effect:hover {  
  display: block;  
  float: left;  
  margin: 0 10px 0 0;  
  border: solid 1px black;  
  border-radius: 7px;  
  padding: 10px 12px 6px;  
  color: #ccc;  
  text-decoration: none;  
  background-color: #555;  
  -webkit-box-shadow: inset 0px 0px 8px #000;  
  -moz-box-shadow: inset 0px 0px 8px #333;  
  box-shadow: inset 0px 0px 8px #333;  
}  
/* line 117, sass/screen.scss */  
.effect.current, .effect:hover.current {  
  color: #2edbac;  
}  

/* line 123, sass/screen.scss */  
#time-indicator {  
  width: 0px;  
  height: 3px;  
  background-color: #2edbac;  
  position: absolute;  
  top: 460px;  
  left: 140px;  
}  
</style>