mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-11-30 02:57:50 +08:00
fix: carousel customPaging demo
This commit is contained in:
wangxueliang
parent
edddbd982a
commit
d2f411a862
@ -176,6 +176,104 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
|
||||
</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`] = `
|
||||
<div class="ant-carousel">
|
||||
<div class="slick-slider slick-initialized">
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
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">
|
||||
<img :src="getImgUrl(props.i)" />
|
||||
</a>
|
||||
<div>
|
||||
<img :src="imgList['abstract01']" />
|
||||
</div>
|
||||
<div>
|
||||
<img :src="imgList['abstract02']" />
|
||||
</div>
|
||||
<div>
|
||||
<img :src="imgList['abstract03']" />
|
||||
</div>
|
||||
<div>
|
||||
<img :src="imgList['abstract04']" />
|
||||
<div v-for="item in 4">
|
||||
<img :src="baseUrl+'abstract0'+item+'.jpg'" />
|
||||
</div>
|
||||
</a-carousel>
|
||||
</template>
|
||||
<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 {
|
||||
data() {
|
||||
return {
|
||||
imgList,
|
||||
baseUrl,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
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 |
|
||||
| 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() | 切换到下一面板 |
|
||||
| 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),
|
||||
afterChange: PropTypes.any.def(null),
|
||||
// appendDots: PropTypes.func.def((h, { dots }) => {
|
||||
// return <ul style={{ display: 'block' }}>{dots}</ul>
|
||||
// }),
|
||||
arrows: PropTypes.bool.def(true),
|
||||
autoplay: PropTypes.bool.def(false),
|
||||
autoplaySpeed: PropTypes.number.def(3000),
|
||||
beforeChange: PropTypes.any.def(null),
|
||||
centerMode: PropTypes.bool.def(false),
|
||||
centerPadding: PropTypes.string.def('50px'),
|
||||
// className: '',
|
||||
cssEase: PropTypes.string.def('ease'),
|
||||
// customPaging: PropTypes.func.def((h, { i }) => {
|
||||
// return <button>{i + 1}</button>
|
||||
// }),
|
||||
dots: PropTypes.bool.def(false),
|
||||
dotsClass: PropTypes.string.def('slick-dots'),
|
||||
draggable: PropTypes.bool.def(true),
|
||||
@ -30,20 +23,14 @@ const defaultProps = {
|
||||
infinite: PropTypes.bool.def(true),
|
||||
initialSlide: PropTypes.number.def(0),
|
||||
lazyLoad: PropTypes.any.def(null),
|
||||
// nextArrow: PropTypes.any.def(null),
|
||||
verticalSwiping: PropTypes.bool.def(false),
|
||||
asNavFor: PropTypes.any.def(null),
|
||||
// onEdge: null,
|
||||
// onInit: null,
|
||||
// onLazyLoadError: null,
|
||||
// onReInit: null,
|
||||
// 圆点hover是否暂停
|
||||
pauseOnDotsHover: PropTypes.bool.def(false),
|
||||
// focus是否暂停
|
||||
pauseOnFocus: PropTypes.bool.def(false),
|
||||
// hover是否暂停
|
||||
pauseOnHover: PropTypes.bool.def(true),
|
||||
// prevArrow: PropTypes.any.def(null),
|
||||
responsive: PropTypes.any.def(null),
|
||||
rows: PropTypes.number.def(1),
|
||||
rtl: PropTypes.bool.def(false),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user