-
Notifications
You must be signed in to change notification settings - Fork 167
/
carousel.jade
164 lines (143 loc) · 6.29 KB
/
carousel.jade
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
154
155
156
157
158
159
160
161
162
163
164
extends _base
block title
title 幻灯片
block head
style(type='text/css').
.sui-carousel {
width: 870px;
}
block sidebar
+sidebar('carousel')
block content
h2.sui-page-header 开发者文档
p.sui-lead
| 幻灯片,一般用来轮播一些图片。注意,在 v1.3.0 及以上版本中才可用。
ul.unstyled
li
strong 更新 v1.4.0: 此组件的css代码被移入了 sui-append.css 中
h2 通过data属性自动加载
p.sui-lead
| 在 <code>.sui-carousel</code> 容器上增加了一个 <code>data-ride="carousel"</code>,则会自动初始化幻灯片。注意,这是在 onload 事件时加载的,所以onload之后异步加载的内容你仍然需要手动初始化。
br
| 有两个属性可以用来控制轮播,分别是 <code>data-slide</code> 和 <code>data-slide-to</code>。其中 <code>data-slide</code> 可以设置为 "prev" 或者 "next",分别表示向上一个和下一个滚动。 <code>data-slide-to</code> 可以设置为一个数字,从0开始,点击之后定位到对应的幻灯片元素。
br
| JS配置项 interval, pause 和 autoStart 可以通过 data-x 属性来在HTML中设置。比如<code>data-interval</code> 可以用来控制轮播间隔时间,单位毫秒,默认是 5000 ; <code>data-pause</code> 可以用来设置暂停的出发动作,默认是 "hover", <code>data-auto-start</code> 可以用来设置是否自动开始播放, 默认为 true。
ul.sui-nav.nav-tabs.nav-large
li.active
a(href='#demo1', data-toggle='tab') 示例
li
a(href='#code1', data-toggle='tab') 代码
div.tab-content
div.tab-pane.active#demo1
div.sui-carousel.slide#myCarousel(data-ride="carousel" data-interval='4000')
ol.carousel-indicators
li.active(data-target="#myCarousel" data-slide-to="0")
li(data-target="#myCarousel" data-slide-to="1")
li(data-target="#myCarousel" data-slide-to="2")
div.carousel-inner
div.active.item
img(src='assets/imgs/carousel-1.jpg')
div.carousel-caption
h4 标题
p
|内容内容内容内容内容内容内容内容内容内容内容内容
div.item
img(src='assets/imgs/carousel-2.jpg')
div.carousel-caption
h4 标题
p
|内容内容内容内容内容内容内容内容内容内容内容内容
div.item
img(src='assets/imgs/carousel-3.jpg')
div.carousel-caption
h4 标题
p
|内容内容内容内容内容内容内容内容内容内容内容内容
a.carousel-control.left(href='#myCarousel' data-slide="prev")‹
a.carousel-control.right(href='#myCarousel' data-slide="next")›
div.tab-pane#code1
pre.prettyprint.linenums(data-target='#demo1')
ul.demo-operations.clearfix
li
a.copy-btn(href='javascript:void(0)', data-target='#demo1>div') 复制代码
h2 通过JS控制
p.sui-lead
| 如果你没有使用 <code>data-ride</code> 自动加载,则可以使用 <code>$('.sui-carousel').carousel(config)</code> 来通过JS初始化。
h4 初始化配置
| 初始化的时候你可以传入一个配置对象,有两个参数 interval 和 pause 可以配置,和 <code>data-x</code> 中的配置是对应的。如下所示
ul.unstyled
li interval: 轮播间隔,默认是 5000 毫秒
li pause: 触发暂停的事件,默认是 "hover"
li autoStart: 是否自动开始播放
h4 可用方法
p
| 有如下方法可以调用:
ul.unstyled
li .carousel('cycle'): 开始轮播
li .carousel('pause'): 暂停轮播
li .carousel(number): 从0开始,定位到某一张幻灯片。
li .carousel('prev'): 上一个
li .carousel('next'): 下一个
ul.sui-nav.nav-tabs.nav-large
li.active
a(href='#demo-js', data-toggle='tab') 示例
li
a(href='#code-js', data-toggle='tab') 代码
div.tab-content
div.tab-pane.active#demo-js
div.sui-carousel.slide#myCarousel2
ol.carousel-indicators
li.active(data-target="#myCarousel2" data-slide-to="0")
li(data-target="#myCarousel2" data-slide-to="1")
li(data-target="#myCarousel2" data-slide-to="2")
div.carousel-inner
div.active.item
img(src='assets/imgs/carousel-1.jpg')
div.carousel-caption
h4 标题
p
|内容内容内容内容内容内容内容内容内容内容内容内容
div.item
img(src='assets/imgs/carousel-2.jpg')
div.carousel-caption
h4 标题
p
|内容内容内容内容内容内容内容内容内容内容内容内容
div.item
img(src='assets/imgs/carousel-3.jpg')
div.carousel-caption
h4 标题
p
|内容内容内容内容内容内容内容内容内容内容内容内容
a.carousel-control.left(href='#myCarousel2' data-slide="prev")‹
a.carousel-control.right(href='#myCarousel2' data-slide="next")›
div.sui-btn-group
button#btn-cycle.sui-btn.btn-bordered.btn-primary 播放
button#btn-pause.sui-btn.btn-bordered.btn-primary 暂停
button#btn-slide2.sui-btn.btn-bordered.btn-primary 定位到第2张
button#btn-slide-prev.sui-btn.btn-bordered.btn-primary 上一个
button#btn-slide-next.sui-btn.btn-bordered.btn-primary 下一个
script.
var $carousel = $("#myCarousel2").carousel({
interval: 2000
});
$("#btn-cycle").click(function() {
$carousel.carousel('cycle');
});
$("#btn-pause").click(function() {
$carousel.carousel('pause');
});
$("#btn-slide2").click(function() {
$carousel.carousel(1);
});
$("#btn-slide-prev").click(function() {
$carousel.carousel('prev');
});
$("#btn-slide-next").click(function() {
$carousel.carousel('next');
});
div.tab-pane#code-js
pre.prettyprint.linenums(data-target='#demo-js')
ul.demo-operations.clearfix
li
a.copy-btn(href='javascript:void(0)', data-target='#demo-js') 复制代码