---
layout      : 'default'
css         : 'carousel'

title       : 'Carousel'
description : 'A carousel alternates display between several pieces of content in sequence.'
type        : 'UI Module'
---
<script src="/javascript/carousel.js"></script>

<%- @partial('header') %>

<div class="main container">

  <div class="peek">
    <div class="ui vertical pointing secondary menu">
      <a class="active item">Standard</a>
      <a class="item">Variations</a>
      <a class="item">Behavior</a>
      <a class="item">Examples</a>
      <a class="item">Usage</a>
    </div>
  </div>

  <h2 class="ui dividing header">Standard</h2>
  <div class="example">
    <h4 class="ui header">Carousel</h4>
    <p>A standard carousel</p>
    <div class="ui carousel">
      <i class="left arrow icon"></i>
      <i class="right arrow icon"></i>
      <div class="slides">
        <div class="slide">
          <img src="/images/demo/item1.jpg">
        </div>
        <div class="slide">
          <img src="/images/demo/item2.jpg">
        </div>
        <div class="slide">
          <img src="/images/demo/item3.jpg">
        </div>
        <div class="slide">
          <img src="/images/demo/item4.jpg">
        </div>
        <div class="slide">
          <img src="/images/demo/item5.jpg">
        </div>
      </div>
      <div class="menu">
        <i class="active circle icon item"></i>
        <i class="circle icon item"></i>
        <i class="circle icon item"></i>
        <i class="circle icon item"></i>
      </div>
    </div>

  </div>

  <h2 class="ui dividing header">Usage</h2>

  <h3>Initializing</h3>
  <h3 class="ui header">Initializing a carousel</h3>
  <div class="code">
    $('.ui.carousel')
      .carousel()
    ;
  </div>

  <h3 class="ui header">Settings</h3>
  <table class="ui red table segment">
    <thead>
      <th colspan="3">Carousel Settings</th>
    </thead>
    <tbody>
      <tr>
        <td>required</td>
        <td>auto</td>
        <td>Setting to true/false will determine whether an input will allow no selection. Auto will set disallow this behavior only for radio boxes</td>
      </tr>
      <tr>
        <td>context</td>
        <td>false</td>
        <td>A selector or jQuery object to use as a delegated event context</td>
      </tr>
    </tbody>
  </table>

  <table class="ui teal table segment">
    <thead>
      <th colspan="3">Callbacks</th>
    </thead>
    <tbody>
      <tr>
        <td>onChange</td>
        <td>None</td>
        <td>Callback after a carousel is either disabled or enabled.</td>
      </tr>
      <tr>
        <td>onEnable</td>
        <td>None</td>
        <td>Callback after a carousel is enabled.</td>
      </tr>
      <tr>
        <td>onDisable</td>
        <td>None</td>
        <td>Callback after a carousel is disabled.</td>
      </tr>
    </tbody>
  </table>

  <table class="ui blue table segment">
    <thead>
      <th colspan="3">UI Module Settings</th>
    </thead>
    <tbody>
      <tr>
        <td>Name</td>
        <td>Carousel</td>
        <td>Name used in debug logs</td>
      </tr>
      <tr>
        <td>debug</td>
        <td>True</td>
        <td>Provides standard debug output to console</td>
      </tr>
      <tr>
        <td>performance</td>
        <td>False</td>
        <td>Provides standard debug output to console</td>
      </tr>
      <tr>
        <td>verbose</td>
        <td>False</td>
        <td>Provides ancillary debug output to console</td>
      </tr>
      <tr>
        <td>namespace</td>
        <td>carousel</td>
        <td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
      </tr>
      <tr>
        <td>errors</td>
        <td colspan="2">
          <div class="code">
    errors : {
      method : 'The method you called is not defined.'
    }
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
</body>

</html>