Semantic-UI/server/draft/carousel.html at pre-release · CssFormWork/Semantic-UI · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
---
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>