Skip to content

Commit e7d82d3

Browse files
wangxueliangwangxueliang
committed
fix: carousel customPaging demo
1 parent dcf2048 commit e7d82d3

File tree

6 files changed

+106
-30
lines changed

6 files changed

+106
-30
lines changed

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

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

179+
exports[`renders ./components/carousel/demo/customPaging.md correctly 1`] = `
180+
<div class="ant-carousel">
181+
<div class="slick-slider slick-initialized">
182+
<button type="button" class="slick-arrow slick-prev" style="display: block;"> Previous</button>
183+
<div class="slick-list">
184+
<div class="slick-track" style="width: 900%; left: -100%;">
185+
<div tabindex="-1" data-index="-1" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
186+
<div>
187+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
188+
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract04.jpg">
189+
</div>
190+
</div>
191+
</div>
192+
<div tabindex="-1" data-index="0" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%;">
193+
<div>
194+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
195+
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract01.jpg">
196+
</div>
197+
</div>
198+
</div>
199+
<div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
200+
<div>
201+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
202+
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract02.jpg">
203+
</div>
204+
</div>
205+
</div>
206+
<div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
207+
<div>
208+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
209+
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract03.jpg">
210+
</div>
211+
</div>
212+
</div>
213+
<div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
214+
<div>
215+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
216+
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract04.jpg">
217+
</div>
218+
</div>
219+
</div>
220+
<div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
221+
<div>
222+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
223+
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract01.jpg">
224+
</div>
225+
</div>
226+
</div>
227+
<div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
228+
<div>
229+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
230+
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract02.jpg">
231+
</div>
232+
</div>
233+
</div>
234+
<div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
235+
<div>
236+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
237+
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract03.jpg">
238+
</div>
239+
</div>
240+
</div>
241+
<div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
242+
<div>
243+
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
244+
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract04.jpg">
245+
</div>
246+
</div>
247+
</div>
248+
</div>
249+
</div>
250+
<button type="button" class="slick-arrow slick-next" style="display: block;"> Next</button>
251+
<ul class="slick-dots slick-thumb" style="display: block;">
252+
<li class="slick-active">
253+
<a class="">
254+
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract01.jpg">
255+
</a>
256+
</li>
257+
<li class="">
258+
<a class="">
259+
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract02.jpg">
260+
</a>
261+
</li>
262+
<li class="">
263+
<a class="">
264+
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract03.jpg">
265+
</a>
266+
</li>
267+
<li class="">
268+
<a class="">
269+
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract04.jpg">
270+
</a>
271+
</li>
272+
</ul>
273+
</div>
274+
</div>
275+
`;
276+
179277
exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
180278
<div class="ant-carousel">
181279
<div class="slick-slider slick-initialized">

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
import demoTest from '../../../tests/shared/demoTest'
22

3-
demoTest('carousel', { skip: ['customPaging.md'] })
3+
demoTest('carousel')

‎components/carousel/demo/customPaging.md‎

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,31 +14,22 @@ Custom paging display
1414
<a slot="customPaging" slot-scope="props">
1515
<img :src="getImgUrl(props.i)" />
1616
</a>
17-
<div>
18-
<img :src="imgList['abstract01']" />
19-
</div>
20-
<div>
21-
<img :src="imgList['abstract02']" />
22-
</div>
23-
<div>
24-
<img :src="imgList['abstract03']" />
25-
</div>
26-
<div>
27-
<img :src="imgList['abstract04']" />
17+
<div v-for="item in 4">
18+
<img :src="baseUrl+'abstract0'+item+'.jpg'" />
2819
</div>
2920
</a-carousel>
3021
</template>
3122
<script>
32-
import imgList from '../../vc-slick/demo/imglist'
23+
const baseUrl = 'https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/'
3324
export default {
3425
data() {
3526
return {
36-
imgList,
27+
baseUrl,
3728
}
3829
},
3930
methods: {
4031
getImgUrl(i) {
41-
return this.imgList[`abstract0${i + 1}`]
32+
return `${baseUrl}abstract0${i + 1}.jpg`
4233
}
4334
}
4435
}

‎components/carousel/index.en-US.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,4 @@
1818
| next() | Change current slide to next slide |
1919
| prev() | Change current slide to previous slide |
2020

21-
For more info on the parameters, refer to the <https://github.com/akiran/react-slick>
21+
For more info on the parameters, refer to the [vc-slick props](<https://github.com/vueComponent/ant-design/blob/master/components/vc-slick/src/default-props.js#L3>)

‎components/carousel/index.zh-CN.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,4 @@
1818
| next() | 切换到下一面板 |
1919
| prev() | 切换到上一面板 |
2020

21-
更多参数可参考：<https://github.com/akiran/react-slick>
21+
更多参数可参考：[vc-slick props](<https://github.com/vueComponent/ant-design/blob/master/components/vc-slick/src/default-props.js#L3>)

‎components/vc-slick/src/default-props.js‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,13 @@ const defaultProps = {
55
// 自定义高度
66
adaptiveHeight: PropTypes.bool.def(false),
77
afterChange: PropTypes.any.def(null),
8-
// appendDots: PropTypes.func.def((h, { dots }) => {
9-
// return <ul style={{ display: 'block' }}>{dots}</ul>
10-
// }),
118
arrows: PropTypes.bool.def(true),
129
autoplay: PropTypes.bool.def(false),
1310
autoplaySpeed: PropTypes.number.def(3000),
1411
beforeChange: PropTypes.any.def(null),
1512
centerMode: PropTypes.bool.def(false),
1613
centerPadding: PropTypes.string.def('50px'),
17-
// className: '',
1814
cssEase: PropTypes.string.def('ease'),
19-
// customPaging: PropTypes.func.def((h, { i }) => {
20-
// return <button>{i + 1}</button>
21-
// }),
2215
dots: PropTypes.bool.def(false),
2316
dotsClass: PropTypes.string.def('slick-dots'),
2417
draggable: PropTypes.bool.def(true),
@@ -30,20 +23,14 @@ const defaultProps = {
3023
infinite: PropTypes.bool.def(true),
3124
initialSlide: PropTypes.number.def(0),
3225
lazyLoad: PropTypes.any.def(null),
33-
// nextArrow: PropTypes.any.def(null),
3426
verticalSwiping: PropTypes.bool.def(false),
3527
asNavFor: PropTypes.any.def(null),
36-
// onEdge: null,
37-
// onInit: null,
38-
// onLazyLoadError: null,
39-
// onReInit: null,
4028
// 圆点hover是否暂停
4129
pauseOnDotsHover: PropTypes.bool.def(false),
4230
// focus是否暂停
4331
pauseOnFocus: PropTypes.bool.def(false),
4432
// hover是否暂停
4533
pauseOnHover: PropTypes.bool.def(true),
46-
// prevArrow: PropTypes.any.def(null),
4734
responsive: PropTypes.any.def(null),
4835
rows: PropTypes.number.def(1),
4936
rtl: PropTypes.bool.def(false),

0 commit comments

Comments
 (0)