anchor.diff:    ...
   </ul>
   ', :html %>
  +
  +<h3>Events</h3>
  +<p>You can bind to the following events in your code.</p>
  +
  +<table style="width:100%;">
  +  <thead>
  +    <tr>
  +      <th>Event</th>
  +      <th>Params</th>
  +      <th>Description</th>
  +    </tr>
  +  </thead>
  +  <tbody>
  +    <tr>
  +      <td>orbit:ready</td>
  +      <td>event</td>
  +      <td>Fires when the slider has loaded</td>
  +    </tr>
  +    <tr>
  +      <td>orbit:before-slide-change</td>
  +      <td>event</td>
  +      <td>Fires before a slide changes</td>
  +    </tr>
  +    <tr>
  +      <td>orbit:after-slide-change</td>
  +      <td>event, orbit</td>
  +      <td>Fires after a slide transition animation has finished. The <code>orbit</code> parameter contains <code>slide_number</code> and <code>total_slides</code>.</td>
  +    </tr>
  +    <tr>
  +      <td>orbit:timer-started</td>
  +      <td>event</td>
  +      <td>Fires each time the timer is started/resumed</td>
  +    </tr>
  +    <tr>
  +      <td>orbit:timer-stopped</td>
  +      <td>event</td>
  +      <td>Fires each time the timer is paused/stopped</td>
  +    </tr>
  +  </tbody>
  +</table>
  +
  +<h5>Example</h5>
  +<p>Here's an example of how you can bind to these events:</p>
  +
  +<%= code_example '<ul id="featured1" data-orbit>
  +  <li>
  +    <img src="../img/demos/demo1.jpg" />
  +    <div class="orbit-caption">...</div>
  +  </li>
  +  <li>
  +    <img src="../img/demos/demo2.jpg" />
  +    <div class="orbit-caption">...</div>
  +  </li>
  +  <li>
  +    <img src="../img/demos/demo3.jpg" />
  +    <div class="orbit-caption">...</div>
  +  </li>
  +</ul>
  +
  +<script>
  +$("#featured1").on("orbit:ready", function(event) {
  +  console.info("ready");
  +});
  +$("#featured1").on("orbit:before-slide-change", function(event) {
  +  console.info("before slide change");
  +});
  +$("#featured1").on("orbit:after-slide-change", function(event, orbit) {
  +  console.info("after slide change");
  +  console.info("slide " + orbit.slide_number + " of " + orbit.total_slides);
  +});
  +$("#featured1").on("orbit:timer-started", function(event, orbit) {
  +  console.info("timer started");
  +});
  +$("#featured1").on("orbit:timer-stopped", function(event, orbit) {
  +  console.info("timer stopped");
  +});
  +</script>
  +', :html %>
  +
  +
   
         </div>
       </div>
  
positive.code:         </p>
  
  <%= code_example '
  <ul id="featured2" data-orbit>
    <li data-orbit-slide="headline-1">
      <h2>Headline 1</h2>
      <h3>Subheadline</h3>
  
negative.code: <%= code_example '
  <div class="slideshow-wrapper">
    <div class="preloader"></div>
    <ul data-orbit>
      <!-- Orbit slides -->
    </ul>
  </div>
  