fix: carousel customPaging demo
parent
dcf2048231
commit
e7d82d3b60
|
@ -176,6 +176,104 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./components/carousel/demo/customPaging.md correctly 1`] = `
|
||||||
|
<div class="ant-carousel">
|
||||||
|
<div class="slick-slider slick-initialized">
|
||||||
|
<button type="button" class="slick-arrow slick-prev" style="display: block;"> Previous</button>
|
||||||
|
<div class="slick-list">
|
||||||
|
<div class="slick-track" style="width: 900%; left: -100%;">
|
||||||
|
<div tabindex="-1" data-index="-1" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
|
||||||
|
<div>
|
||||||
|
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||||
|
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract04.jpg">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div tabindex="-1" data-index="0" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%;">
|
||||||
|
<div>
|
||||||
|
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||||
|
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract01.jpg">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
|
||||||
|
<div>
|
||||||
|
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||||
|
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract02.jpg">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
|
||||||
|
<div>
|
||||||
|
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||||
|
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract03.jpg">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
|
||||||
|
<div>
|
||||||
|
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||||
|
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract04.jpg">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
|
||||||
|
<div>
|
||||||
|
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||||
|
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract01.jpg">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
|
||||||
|
<div>
|
||||||
|
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||||
|
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract02.jpg">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
|
||||||
|
<div>
|
||||||
|
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||||
|
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract03.jpg">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
|
||||||
|
<div>
|
||||||
|
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||||
|
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract04.jpg">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="slick-arrow slick-next" style="display: block;"> Next</button>
|
||||||
|
<ul class="slick-dots slick-thumb" style="display: block;">
|
||||||
|
<li class="slick-active">
|
||||||
|
<a class="">
|
||||||
|
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract01.jpg">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a class="">
|
||||||
|
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract02.jpg">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a class="">
|
||||||
|
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract03.jpg">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a class="">
|
||||||
|
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract04.jpg">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
|
exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
|
||||||
<div class="ant-carousel">
|
<div class="ant-carousel">
|
||||||
<div class="slick-slider slick-initialized">
|
<div class="slick-slider slick-initialized">
|
||||||
|
|
|
@ -1,3 +1,3 @@
|
||||||
import demoTest from '../../../tests/shared/demoTest'
|
import demoTest from '../../../tests/shared/demoTest'
|
||||||
|
|
||||||
demoTest('carousel', { skip: ['customPaging.md'] })
|
demoTest('carousel')
|
||||||
|
|
|
@ -14,31 +14,22 @@ Custom paging display
|
||||||
<a slot="customPaging" slot-scope="props">
|
<a slot="customPaging" slot-scope="props">
|
||||||
<img :src="getImgUrl(props.i)" />
|
<img :src="getImgUrl(props.i)" />
|
||||||
</a>
|
</a>
|
||||||
<div>
|
<div v-for="item in 4">
|
||||||
<img :src="imgList['abstract01']" />
|
<img :src="baseUrl+'abstract0'+item+'.jpg'" />
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<img :src="imgList['abstract02']" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<img :src="imgList['abstract03']" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<img :src="imgList['abstract04']" />
|
|
||||||
</div>
|
</div>
|
||||||
</a-carousel>
|
</a-carousel>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import imgList from '../../vc-slick/demo/imglist'
|
const baseUrl = 'https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/'
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
imgList,
|
baseUrl,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getImgUrl(i) {
|
getImgUrl(i) {
|
||||||
return this.imgList[`abstract0${i + 1}`]
|
return `${baseUrl}abstract0${i + 1}.jpg`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,4 +18,4 @@
|
||||||
| next() | Change current slide to next slide |
|
| next() | Change current slide to next slide |
|
||||||
| prev() | Change current slide to previous slide |
|
| prev() | Change current slide to previous slide |
|
||||||
|
|
||||||
For more info on the parameters, refer to the <https://github.com/akiran/react-slick>
|
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>)
|
||||||
|
|
|
@ -18,4 +18,4 @@
|
||||||
| next() | 切换到下一面板 |
|
| next() | 切换到下一面板 |
|
||||||
| prev() | 切换到上一面板 |
|
| prev() | 切换到上一面板 |
|
||||||
|
|
||||||
更多参数可参考:<https://github.com/akiran/react-slick>
|
更多参数可参考:[vc-slick props](<https://github.com/vueComponent/ant-design/blob/master/components/vc-slick/src/default-props.js#L3>)
|
||||||
|
|
|
@ -5,20 +5,13 @@ const defaultProps = {
|
||||||
// 自定义高度
|
// 自定义高度
|
||||||
adaptiveHeight: PropTypes.bool.def(false),
|
adaptiveHeight: PropTypes.bool.def(false),
|
||||||
afterChange: PropTypes.any.def(null),
|
afterChange: PropTypes.any.def(null),
|
||||||
// appendDots: PropTypes.func.def((h, { dots }) => {
|
|
||||||
// return <ul style={{ display: 'block' }}>{dots}</ul>
|
|
||||||
// }),
|
|
||||||
arrows: PropTypes.bool.def(true),
|
arrows: PropTypes.bool.def(true),
|
||||||
autoplay: PropTypes.bool.def(false),
|
autoplay: PropTypes.bool.def(false),
|
||||||
autoplaySpeed: PropTypes.number.def(3000),
|
autoplaySpeed: PropTypes.number.def(3000),
|
||||||
beforeChange: PropTypes.any.def(null),
|
beforeChange: PropTypes.any.def(null),
|
||||||
centerMode: PropTypes.bool.def(false),
|
centerMode: PropTypes.bool.def(false),
|
||||||
centerPadding: PropTypes.string.def('50px'),
|
centerPadding: PropTypes.string.def('50px'),
|
||||||
// className: '',
|
|
||||||
cssEase: PropTypes.string.def('ease'),
|
cssEase: PropTypes.string.def('ease'),
|
||||||
// customPaging: PropTypes.func.def((h, { i }) => {
|
|
||||||
// return <button>{i + 1}</button>
|
|
||||||
// }),
|
|
||||||
dots: PropTypes.bool.def(false),
|
dots: PropTypes.bool.def(false),
|
||||||
dotsClass: PropTypes.string.def('slick-dots'),
|
dotsClass: PropTypes.string.def('slick-dots'),
|
||||||
draggable: PropTypes.bool.def(true),
|
draggable: PropTypes.bool.def(true),
|
||||||
|
@ -30,20 +23,14 @@ const defaultProps = {
|
||||||
infinite: PropTypes.bool.def(true),
|
infinite: PropTypes.bool.def(true),
|
||||||
initialSlide: PropTypes.number.def(0),
|
initialSlide: PropTypes.number.def(0),
|
||||||
lazyLoad: PropTypes.any.def(null),
|
lazyLoad: PropTypes.any.def(null),
|
||||||
// nextArrow: PropTypes.any.def(null),
|
|
||||||
verticalSwiping: PropTypes.bool.def(false),
|
verticalSwiping: PropTypes.bool.def(false),
|
||||||
asNavFor: PropTypes.any.def(null),
|
asNavFor: PropTypes.any.def(null),
|
||||||
// onEdge: null,
|
|
||||||
// onInit: null,
|
|
||||||
// onLazyLoadError: null,
|
|
||||||
// onReInit: null,
|
|
||||||
// 圆点hover是否暂停
|
// 圆点hover是否暂停
|
||||||
pauseOnDotsHover: PropTypes.bool.def(false),
|
pauseOnDotsHover: PropTypes.bool.def(false),
|
||||||
// focus是否暂停
|
// focus是否暂停
|
||||||
pauseOnFocus: PropTypes.bool.def(false),
|
pauseOnFocus: PropTypes.bool.def(false),
|
||||||
// hover是否暂停
|
// hover是否暂停
|
||||||
pauseOnHover: PropTypes.bool.def(true),
|
pauseOnHover: PropTypes.bool.def(true),
|
||||||
// prevArrow: PropTypes.any.def(null),
|
|
||||||
responsive: PropTypes.any.def(null),
|
responsive: PropTypes.any.def(null),
|
||||||
rows: PropTypes.number.def(1),
|
rows: PropTypes.number.def(1),
|
||||||
rtl: PropTypes.bool.def(false),
|
rtl: PropTypes.bool.def(false),
|
||||||
|
|
Loading…
Reference in New Issue