You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

143 lines
3.5 KiB

---
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">
<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>