Skip to content

Commit c4ee9b7

Browse files
wangxueliangwangxueliang
committed
feat: add carousel customArrows demo
1 parent e7d82d3 commit c4ee9b7

File tree

4 files changed

+179
-4
lines changed

4 files changed

+179
-4
lines changed

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

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,100 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
176176
</div>
177177
`;
178178

179+
exports[`renders ./components/carousel/demo/customArrows.md correctly 1`] = `
180+
<div class="ant-carousel">
181+
<div class="slick-slider slick-initialized">
182+
<div class="custom-slick-arrow slick-arrow slick-prev" style="display: block;">
183+
<i class="anticon anticon-left-square"></i>
184+
</div>
185+
<div class="slick-list">
186+
<div class="slick-track" style="width: 900%; left: -100%;">
187+
<div tabindex="-1" data-index="-1" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
188+
<div>
189+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
190+
<h3>4</h3>
191+
</div>
192+
</div>
193+
</div>
194+
<div tabindex="-1" data-index="0" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%;">
195+
<div>
196+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
197+
<h3>1</h3>
198+
</div>
199+
</div>
200+
</div>
201+
<div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
202+
<div>
203+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
204+
<h3>2</h3>
205+
</div>
206+
</div>
207+
</div>
208+
<div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
209+
<div>
210+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
211+
<h3>3</h3>
212+
</div>
213+
</div>
214+
</div>
215+
<div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
216+
<div>
217+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
218+
<h3>4</h3>
219+
</div>
220+
</div>
221+
</div>
222+
<div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
223+
<div>
224+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
225+
<h3>1</h3>
226+
</div>
227+
</div>
228+
</div>
229+
<div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
230+
<div>
231+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
232+
<h3>2</h3>
233+
</div>
234+
</div>
235+
</div>
236+
<div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
237+
<div>
238+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
239+
<h3>3</h3>
240+
</div>
241+
</div>
242+
</div>
243+
<div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
244+
<div>
245+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
246+
<h3>4</h3>
247+
</div>
248+
</div>
249+
</div>
250+
</div>
251+
</div>
252+
<div class="custom-slick-arrow slick-arrow slick-next" style="right: -20px; display: block;">
253+
<i class="anticon anticon-right-square"></i>
254+
</div>
255+
<ul class="slick-dots" style="display: block;">
256+
<li class="slick-active">
257+
<button class="">1</button>
258+
</li>
259+
<li class="">
260+
<button class="">2</button>
261+
</li>
262+
<li class="">
263+
<button class="">3</button>
264+
</li>
265+
<li class="">
266+
<button class="">4</button>
267+
</li>
268+
</ul>
269+
</div>
270+
</div>
271+
`;
272+
179273
exports[`renders ./components/carousel/demo/customPaging.md correctly 1`] = `
180274
<div class="ant-carousel">
181275
<div class="slick-slider slick-initialized">

‎components/carousel/demo/customArrows.md

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<cn>
2+
#### 自定义箭头
3+
自定义箭头展示。
4+
</cn>
5+
6+
<us>
7+
#### Custom Arrows
8+
Custom arrows display
9+
</us>
10+
11+
```html
12+
<template>
13+
<a-carousel arrows>
14+
<template slot="prevArrow" slot-scope="props">
15+
<div
16+
class="custom-slick-arrow"
17+
>
18+
<a-icon type="left-square" />
19+
</div>
20+
</template>
21+
<template slot="nextArrow" slot-scope="props">
22+
<div
23+
class="custom-slick-arrow"
24+
style="right: -20px"
25+
>
26+
<a-icon type="right-square" />
27+
</div>
28+
</template>
29+
<div><h3>1</h3></div>
30+
<div><h3>2</h3></div>
31+
<div><h3>3</h3></div>
32+
<div><h3>4</h3></div>
33+
</a-carousel>
34+
</template>
35+
<script>
36+
export default {}
37+
</script>
38+
<style scoped>
39+
/* For demo */
40+
.ant-carousel >>> .slick-slide {
41+
text-align: center;
42+
height: 160px;
43+
line-height: 160px;
44+
background: #364d79;
45+
overflow: hidden;
46+
}
47+
48+
.ant-carousel >>> .custom-slick-arrow {
49+
display: block;
50+
font-size: 25px;
51+
background: #fff;
52+
color: #5d5959;
53+
}
54+
.ant-carousel >>> .custom-slick-arrow:before {
55+
display: none;
56+
}
57+
.ant-carousel >>> .custom-slick-arrow:hover {
58+
color: #403d3d
59+
}
60+
61+
.ant-carousel >>> .slick-slide h3 {
62+
color: #fff;
63+
}
64+
</style>
65+
```

‎components/carousel/demo/index.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Fade from './fade'
44
import Autoplay from './autoplay'
55
import Vertical from './vertical'
66
import CustomPaging from './customPaging'
7+
import CustomArrows from './customArrows'
78
89
import CN from '../index.zh-CN.md'
910
import US from '../index.en-US.md'
@@ -42,6 +43,7 @@ export default {
4243
<Fade />
4344
<Autoplay />
4445
<CustomPaging />
46+
<CustomArrows />
4547
<api>
4648
<CN slot='cn' />
4749
<US />

‎components/vc-slick/src/arrows.js

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const PrevArrow = {
3535
domProps: {
3636
'data-role': 'none',
3737
},
38-
class: classnames(prevClasses),
38+
class: prevClasses,
3939
style: { display: 'block' },
4040
on: {
4141
click: prevHandler,
@@ -53,7 +53,14 @@ export const PrevArrow = {
5353
...{
5454
props: customProps,
5555
},
56-
}), {})
56+
}), {
57+
key: '0',
58+
class: prevClasses,
59+
style: { display: 'block' },
60+
on: {
61+
click: prevHandler,
62+
},
63+
})
5764
} else {
5865
prevArrow = (
5966
<button key='0' type='button' {...prevArrowProps}>
@@ -96,7 +103,7 @@ export const NextArrow = {
96103
domProps: {
97104
'data-role': 'none',
98105
},
99-
class: classnames(nextClasses),
106+
class: nextClasses,
100107
style: { display: 'block' },
101108
on: {
102109
click: nextHandler,
@@ -114,7 +121,14 @@ export const NextArrow = {
114121
...{
115122
props: customProps,
116123
},
117-
}), {})
124+
}), {
125+
key: '1',
126+
class: nextClasses,
127+
style: { display: 'block' },
128+
on: {
129+
click: nextHandler,
130+
},
131+
})
118132
} else {
119133
nextArrow = (
120134
<button key='1' type='button' {...nextArrowProps}>

0 commit comments

Comments
 (0)