偏右
9 years ago
11 changed files with 371 additions and 1 deletions
@ -0,0 +1,21 @@ |
|||
# 自动切换 |
|||
|
|||
- order: 3 |
|||
|
|||
定时切换下一张。 |
|||
|
|||
--- |
|||
|
|||
````jsx |
|||
var Carousel = antd.Carousel; |
|||
|
|||
React.render( |
|||
<Carousel autoplay="true"> |
|||
<div><h3>1</h3></div> |
|||
<div><h3>2</h3></div> |
|||
<div><h3>3</h3></div> |
|||
<div><h3>4</h3></div> |
|||
</Carousel> |
|||
, document.getElementById('components-carousel-demo-autoplay')); |
|||
```` |
|||
|
|||
@ -0,0 +1,20 @@ |
|||
# 基本 |
|||
|
|||
- order: 0 |
|||
|
|||
最简单的用法。 |
|||
|
|||
--- |
|||
|
|||
````jsx |
|||
var Carousel = antd.Carousel; |
|||
|
|||
React.render( |
|||
<Carousel> |
|||
<div><h3>1</h3></div> |
|||
<div><h3>2</h3></div> |
|||
<div><h3>3</h3></div> |
|||
<div><h3>4</h3></div> |
|||
</Carousel> |
|||
, document.getElementById('components-carousel-demo-basic')); |
|||
```` |
|||
@ -0,0 +1,21 @@ |
|||
# 渐显 |
|||
|
|||
- order: 2 |
|||
|
|||
切换效果为渐显。 |
|||
|
|||
--- |
|||
|
|||
````jsx |
|||
var Carousel = antd.Carousel; |
|||
|
|||
React.render( |
|||
<Carousel effect="fade"> |
|||
<div><h3>1</h3></div> |
|||
<div><h3>2</h3></div> |
|||
<div><h3>3</h3></div> |
|||
<div><h3>4</h3></div> |
|||
</Carousel> |
|||
, document.getElementById('components-carousel-demo-fade')); |
|||
```` |
|||
|
|||
@ -0,0 +1,20 @@ |
|||
# 垂直 |
|||
|
|||
- order: 1 |
|||
|
|||
垂直显示。 |
|||
|
|||
--- |
|||
|
|||
````jsx |
|||
var Carousel = antd.Carousel; |
|||
|
|||
React.render( |
|||
<Carousel vertical="true"> |
|||
<div><h3>1</h3></div> |
|||
<div><h3>2</h3></div> |
|||
<div><h3>3</h3></div> |
|||
<div><h3>4</h3></div> |
|||
</Carousel> |
|||
, document.getElementById('components-carousel-demo-vertical')); |
|||
```` |
|||
@ -0,0 +1,34 @@ |
|||
import Carousel from 'react-slick'; |
|||
import React from 'react'; |
|||
import assign from 'object-assign'; |
|||
|
|||
var AntCarousel = React.createClass({ |
|||
|
|||
getDefaultProps() { |
|||
return { |
|||
dots: true, |
|||
arrows: false |
|||
}; |
|||
}, |
|||
|
|||
render() { |
|||
var props = assign({}, this.props); |
|||
|
|||
if (props.effect === 'fade') { |
|||
props.fade = true; |
|||
} |
|||
|
|||
var className = 'ant-carousel'; |
|||
if (props.vertical) { |
|||
className = className + ' ant-carousel-vertical'; |
|||
} |
|||
|
|||
return ( |
|||
<div className={className}> |
|||
<Carousel {...props} /> |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
|
|||
export default AntCarousel; |
|||
@ -0,0 +1,126 @@ |
|||
|
|||
.ant-carousel { |
|||
|
|||
/* Arrows */ |
|||
|
|||
.slick-prev, |
|||
.slick-next { |
|||
position: absolute; |
|||
display: block; |
|||
height: 20px; |
|||
width: 20px; |
|||
line-height: 0px; |
|||
font-size: 0px; |
|||
cursor: pointer; |
|||
background: transparent; |
|||
color: transparent; |
|||
top: 50%; |
|||
margin-top: -10px; |
|||
padding: 0; |
|||
border: none; |
|||
outline: none; |
|||
&:hover, &:focus { |
|||
outline: none; |
|||
background: transparent; |
|||
color: transparent; |
|||
&:before { |
|||
opacity: 1; |
|||
} |
|||
} |
|||
&.slick-disabled:before { |
|||
opacity: 0.25; |
|||
} |
|||
} |
|||
|
|||
.slick-prev { |
|||
left: -25px; |
|||
&:before { |
|||
content: "←"; |
|||
} |
|||
} |
|||
|
|||
.slick-next { |
|||
right: -25px; |
|||
&:before { |
|||
content: "→"; |
|||
} |
|||
} |
|||
|
|||
/* Dots */ |
|||
|
|||
.slick-slider { |
|||
padding-bottom: 45px; |
|||
} |
|||
|
|||
.slick-dots { |
|||
position: absolute; |
|||
bottom: 0px; |
|||
list-style: none; |
|||
display: block; |
|||
text-align: center; |
|||
padding: 0; |
|||
width: 100%; |
|||
li { |
|||
position: relative; |
|||
display: inline-block; |
|||
height: 20px; |
|||
width: 20px; |
|||
margin: 0 5px; |
|||
padding: 0; |
|||
cursor: pointer; |
|||
button { |
|||
border: 0; |
|||
background: transparent; |
|||
display: block; |
|||
height: 20px; |
|||
width: 20px; |
|||
outline: none; |
|||
line-height: 0px; |
|||
font-size: 0px; |
|||
color: transparent; |
|||
padding: 5px; |
|||
cursor: pointer; |
|||
&:hover, &:focus { |
|||
outline: none; |
|||
&:before { |
|||
opacity: 1; |
|||
} |
|||
} |
|||
&:before { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
content: "•"; |
|||
width: 20px; |
|||
height: 20px; |
|||
font-size: 18px; |
|||
font-family: arial, sans-serif; |
|||
line-height: 20px; |
|||
text-align: center; |
|||
color: gray; |
|||
opacity: 0.25; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
} |
|||
&.slick-active button:before { |
|||
color: black; |
|||
opacity: 0.75; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.ant-carousel-vertical { |
|||
|
|||
.slick-slider { |
|||
padding-bottom: 0; |
|||
} |
|||
|
|||
.slick-dots { |
|||
width: 20px; |
|||
bottom: auto; |
|||
right: -35px; |
|||
top: 0; |
|||
} |
|||
} |
|||
@ -0,0 +1,94 @@ |
|||
|
|||
.ant-carousel { |
|||
|
|||
.slick-slider { |
|||
position: relative; |
|||
display: block; |
|||
box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-webkit-touch-callout: none; |
|||
user-select: none; |
|||
-ms-touch-action: pan-y; |
|||
touch-action: pan-y; |
|||
-webkit-tap-highlight-color: transparent; |
|||
} |
|||
.slick-list { |
|||
position: relative; |
|||
overflow: hidden; |
|||
display: block; |
|||
margin: 0; |
|||
padding: 0; |
|||
|
|||
&:focus { |
|||
outline: none; |
|||
} |
|||
|
|||
&.dragging { |
|||
cursor: pointer; |
|||
cursor: hand; |
|||
} |
|||
} |
|||
.slick-slider .slick-track, |
|||
.slick-slider .slick-list { |
|||
transform: translate3d(0, 0, 0); |
|||
} |
|||
|
|||
.slick-track { |
|||
position: relative; |
|||
left: 0; |
|||
top: 0; |
|||
display: block; |
|||
|
|||
&:before, |
|||
&:after { |
|||
content: ""; |
|||
display: table; |
|||
} |
|||
|
|||
&:after { |
|||
clear: both; |
|||
} |
|||
|
|||
.slick-loading & { |
|||
visibility: hidden; |
|||
} |
|||
} |
|||
.slick-slide { |
|||
float: left; |
|||
height: 100%; |
|||
min-height: 1px; |
|||
[dir="rtl"] & { |
|||
float: right; |
|||
} |
|||
img { |
|||
display: block; |
|||
} |
|||
&.slick-loading img { |
|||
display: none; |
|||
} |
|||
|
|||
display: none; |
|||
|
|||
&.dragging img { |
|||
pointer-events: none; |
|||
} |
|||
} |
|||
|
|||
.slick-initialized .slick-slide { |
|||
display: block; |
|||
} |
|||
|
|||
.slick-loading .slick-slide { |
|||
visibility: hidden; |
|||
} |
|||
|
|||
.slick-vertical .slick-slide { |
|||
display: block; |
|||
height: auto; |
|||
border: 1px solid transparent; |
|||
} |
|||
.slick-arrow.slick-hidden { |
|||
display: none; |
|||
} |
|||
|
|||
} |
|||
Loading…
Reference in new issue