Skip to content

Commit dcf2048

Browse files
wangxueliangwangxueliang
committed
feat: add carousel
1 parent e6367f2 commit dcf2048

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

77 files changed

+5638
-6
lines changed

‎.jest.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ module.exports = {
1414
"jsx",
1515
"json",
1616
"vue",
17-
"md"
17+
"md",
18+
"jpg"
1819
],
1920
modulePathIgnorePatterns: [
2021
'/_site/',

‎components/carousel/__tests__/__snapshots__/demo.test.js.snap

Lines changed: 318 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,318 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
4+
<div class="ant-carousel">
5+
<div class="slick-slider slick-initialized">
6+
<div class="slick-list">
7+
<div class="slick-track" style="width: 900%; left: -100%;">
8+
<div tabindex="-1" data-index="-1" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
9+
<div>
10+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
11+
<h3>4</h3>
12+
</div>
13+
</div>
14+
</div>
15+
<div tabindex="-1" data-index="0" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%;">
16+
<div>
17+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
18+
<h3>1</h3>
19+
</div>
20+
</div>
21+
</div>
22+
<div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
23+
<div>
24+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
25+
<h3>2</h3>
26+
</div>
27+
</div>
28+
</div>
29+
<div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
30+
<div>
31+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
32+
<h3>3</h3>
33+
</div>
34+
</div>
35+
</div>
36+
<div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
37+
<div>
38+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
39+
<h3>4</h3>
40+
</div>
41+
</div>
42+
</div>
43+
<div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
44+
<div>
45+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
46+
<h3>1</h3>
47+
</div>
48+
</div>
49+
</div>
50+
<div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
51+
<div>
52+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
53+
<h3>2</h3>
54+
</div>
55+
</div>
56+
</div>
57+
<div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
58+
<div>
59+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
60+
<h3>3</h3>
61+
</div>
62+
</div>
63+
</div>
64+
<div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
65+
<div>
66+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
67+
<h3>4</h3>
68+
</div>
69+
</div>
70+
</div>
71+
</div>
72+
</div>
73+
<ul class="slick-dots" style="display: block;">
74+
<li class="slick-active">
75+
<button class="">1</button>
76+
</li>
77+
<li class="">
78+
<button class="">2</button>
79+
</li>
80+
<li class="">
81+
<button class="">3</button>
82+
</li>
83+
<li class="">
84+
<button class="">4</button>
85+
</li>
86+
</ul>
87+
</div>
88+
</div>
89+
`;
90+
91+
exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
92+
<div class="ant-carousel">
93+
<div class="slick-slider slick-initialized">
94+
<div class="slick-list">
95+
<div class="slick-track" style="width: 900%; left: -100%;">
96+
<div tabindex="-1" data-index="-1" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
97+
<div>
98+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
99+
<h3>4</h3>
100+
</div>
101+
</div>
102+
</div>
103+
<div tabindex="-1" data-index="0" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%;">
104+
<div>
105+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
106+
<h3>1</h3>
107+
</div>
108+
</div>
109+
</div>
110+
<div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
111+
<div>
112+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
113+
<h3>2</h3>
114+
</div>
115+
</div>
116+
</div>
117+
<div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
118+
<div>
119+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
120+
<h3>3</h3>
121+
</div>
122+
</div>
123+
</div>
124+
<div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
125+
<div>
126+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
127+
<h3>4</h3>
128+
</div>
129+
</div>
130+
</div>
131+
<div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
132+
<div>
133+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
134+
<h3>1</h3>
135+
</div>
136+
</div>
137+
</div>
138+
<div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
139+
<div>
140+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
141+
<h3>2</h3>
142+
</div>
143+
</div>
144+
</div>
145+
<div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
146+
<div>
147+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
148+
<h3>3</h3>
149+
</div>
150+
</div>
151+
</div>
152+
<div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
153+
<div>
154+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
155+
<h3>4</h3>
156+
</div>
157+
</div>
158+
</div>
159+
</div>
160+
</div>
161+
<ul class="slick-dots" style="display: block;">
162+
<li class="slick-active">
163+
<button class="">1</button>
164+
</li>
165+
<li class="">
166+
<button class="">2</button>
167+
</li>
168+
<li class="">
169+
<button class="">3</button>
170+
</li>
171+
<li class="">
172+
<button class="">4</button>
173+
</li>
174+
</ul>
175+
</div>
176+
</div>
177+
`;
178+
179+
exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
180+
<div class="ant-carousel">
181+
<div class="slick-slider slick-initialized">
182+
<div class="slick-list">
183+
<div class="slick-track" style="width: 900%; left: -100%;">
184+
<div tabindex="-1" data-index="0" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%; position: relative; left: 0px; opacity: 1;">
185+
<div>
186+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
187+
<h3>1</h3>
188+
</div>
189+
</div>
190+
</div>
191+
<div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%; position: relative; left: -11px; opacity: 0;">
192+
<div>
193+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
194+
<h3>2</h3>
195+
</div>
196+
</div>
197+
</div>
198+
<div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%; position: relative; left: -22px; opacity: 0;">
199+
<div>
200+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
201+
<h3>3</h3>
202+
</div>
203+
</div>
204+
</div>
205+
<div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%; position: relative; left: -33px; opacity: 0;">
206+
<div>
207+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
208+
<h3>4</h3>
209+
</div>
210+
</div>
211+
</div>
212+
</div>
213+
</div>
214+
<ul class="slick-dots" style="display: block;">
215+
<li class="slick-active">
216+
<button class="">1</button>
217+
</li>
218+
<li class="">
219+
<button class="">2</button>
220+
</li>
221+
<li class="">
222+
<button class="">3</button>
223+
</li>
224+
<li class="">
225+
<button class="">4</button>
226+
</li>
227+
</ul>
228+
</div>
229+
</div>
230+
`;
231+
232+
exports[`renders ./components/carousel/demo/vertical.md correctly 1`] = `
233+
<div class="ant-carousel ant-carousel-vertical">
234+
<div class="slick-slider slick-vertical slick-initialized">
235+
<div class="slick-list">
236+
<div class="slick-track" style="width: 900%; left: -100%;">
237+
<div tabindex="-1" data-index="-1" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
238+
<div>
239+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
240+
<h3>4</h3>
241+
</div>
242+
</div>
243+
</div>
244+
<div tabindex="-1" data-index="0" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%;">
245+
<div>
246+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
247+
<h3>1</h3>
248+
</div>
249+
</div>
250+
</div>
251+
<div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
252+
<div>
253+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
254+
<h3>2</h3>
255+
</div>
256+
</div>
257+
</div>
258+
<div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
259+
<div>
260+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
261+
<h3>3</h3>
262+
</div>
263+
</div>
264+
</div>
265+
<div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
266+
<div>
267+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
268+
<h3>4</h3>
269+
</div>
270+
</div>
271+
</div>
272+
<div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
273+
<div>
274+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
275+
<h3>1</h3>
276+
</div>
277+
</div>
278+
</div>
279+
<div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
280+
<div>
281+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
282+
<h3>2</h3>
283+
</div>
284+
</div>
285+
</div>
286+
<div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
287+
<div>
288+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
289+
<h3>3</h3>
290+
</div>
291+
</div>
292+
</div>
293+
<div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
294+
<div>
295+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
296+
<h3>4</h3>
297+
</div>
298+
</div>
299+
</div>
300+
</div>
301+
</div>
302+
<ul class="slick-dots" style="display: block;">
303+
<li class="slick-active">
304+
<button class="">1</button>
305+
</li>
306+
<li class="">
307+
<button class="">2</button>
308+
</li>
309+
<li class="">
310+
<button class="">3</button>
311+
</li>
312+
<li class="">
313+
<button class="">4</button>
314+
</li>
315+
</ul>
316+
</div>
317+
</div>
318+
`;

‎components/carousel/__tests__/demo.test.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import demoTest from '../../../tests/shared/demoTest'
2+
3+
demoTest('carousel', { skip: ['customPaging.md'] })

0 commit comments

Comments
 (0)