<div id="sequence">

  <ul>

  <li>

  <div class="intro animate-in">

  <h2>Оглавление 1</h2>

  <h3>контент 1</h3>

  </div>

  <img class="iphone animate-in" src="images/iphone.png" alt="iPhone4" />

  <img class="iphone-shadow animate-in" src="images/iphone-shadow.png" alt="" />

  </li>

  <li>

  <img class="ipad" src="/images/ipad.png" alt="iPad" />

  <div class="slide2">

  <h2>Оглавление 2</h2>

  <p>Контент 2</p>

  </div>

  <img class="ipad-shadow" src="/images/ipad-shadow.png" alt="" />

  </li>

  <li>

  <div class="slide3">

  <h2>Оглавление 3</h2>

  <p>Контент 3</p>

  </div>

  <img class="iphone2" src="/images/iphone.png" alt="iPhone4" />

  <img class="iphone2-shadow" src="/images/iphone-shadow.png" alt="" />

  <img class="iphone3" src="/images/iphone.png" alt="iPhone4" />

  <img class="iphone3-shadow" src="/images/iphone-shadow.png" alt="" />

  <img class="iphone4" src="/images/iphone.png" alt="iPhone4" />

  <img class="iphone4-shadow" src="/images/iphone-shadow.png" alt="" />

  </li>

  </ul>

  </div>

<link rel="stylesheet" type="text/css" media="screen" href="/css/sequencejs-theme.apple-style.css" />

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

  <script type="text/javascript">

  if (typeof jQuery == 'undefined'){

  document.write(unescape("%3Cscript src='/js/jquery.js' type='text/javascript'%3E%3C/script%3E"));

  }

  </script>

  <script type="text/javascript" src="/js/sequence.jquery-min.js"></script>

  <script type="text/javascript">  

  $(document).ready(function(){

  var options = {

  nextButton: false,

  prevButton: false,  

  autoPlayDelay: 3000,  

  pauseOnHover: false,  

  animateStartingFrameIn: true,  

  delayDuringOutInTransitions: 750,

  keysNavigate: true,  

  touchEnabled: false,

  startingFrameID: 1,  

  fallbackTheme: {  

  speed: 500

  }

  };

  var sequence = $("#sequence").sequence(options).data("sequence");

  })

  </script>