我正在使用antd Caroseul,但我还没有看到创建prev / next或pause按钮的示例。
const { Carousel } = antd;
ReactDOM.render(
<Carousel autoplay>
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
</Carousel>
, document.getElementById('app'));
答案 0 :(得分:5)
import React, { Component } from "react";
import { Carousel, Icon } from "antd";
export default class CarouselComponent extends Component {
constructor(props) {
super(props);
this.next = this.next.bind(this);
this.previous = this.previous.bind(this);
this.carousel = React.createRef();
}
next() {
this.carousel.next();
}
previous() {
this.carousel.prev();
}
render() {
const props = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
return (
<div>
<Icon type="left-circle" onClick={this.previous} />
<Carousel ref={node => (this.carousel = node)} {...props}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
</Carousel>
<Icon type="right-circle" onClick={this.next} />
</div>
);
}
}
答案 1 :(得分:2)
在阅读https://ant.design/components/carousel/的同时,我滚动到底部并表示它正在使用https://github.com/akiran/react-slick
如果向下滚动到prop
表,则可以使用nextArrow
或prevArrow
将React元素作为值。
答案 2 :(得分:2)
首先:arrow
是有效的Carousel属性,它使箭头能够手动控制内容。
它是antd的disabled by default。
您可以这样启用它:
<Carousel arrows>
//
</Carousel>
但是您不会看到它们,因为.ant-carousel .slick-prev
和.ant-carousel .slick-prev
的样式是透明的。
这时您已经可以覆盖样式(例如display: block; background: red
)。
另一种选择是使用React Slick属性从道具内部控制样式(Antd在Carousel组件的引擎盖下使用React Slick)
这是完整的组件示例:
import React from 'react'
import { Row, Col, Carousel } from 'antd'
const contentStyle = {
height: '160px',
color: '#fff',
lineHeight: '160px',
textAlign: 'center',
background: '#364d79'
}
// from https://react-slick.neostack.com/docs/example/custom-arrows
const SampleNextArrow = props => {
const { className, style, onClick } = props
return (
<div
className={className}
style={{ ...style, display: 'block', background: 'red' }}
onClick={onClick}
/>
)
}
const SamplePrevArrow = props => {
const { className, style, onClick } = props
return (
<div
className={className}
style={{ ...style, display: 'block', background: 'green' }}
onClick={onClick}
/>
)
}
const settings = {
nextArrow: <SampleNextArrow />,
prevArrow: <SamplePrevArrow />
}
const CarouselArrows = () => {
return (
<>
<Row justify="center">
<Col span={16}>
<Carousel arrows {...settings}>
<div>
<h3 style={contentStyle}>1</h3>
</div>
<div>
<h3 style={contentStyle}>2</h3>
</div>
<div>
<h3 style={contentStyle}>3</h3>
</div>
<div>
<h3 style={contentStyle}>4</h3>
</div>
</Carousel>
</Col>
</Row>
</>
)
}
export default CarouselArrows
有一个具有::before
属性的content
选择器,它有点搞砸了样式(不能从内联样式中覆盖它)。
不过,您可以利用它,并将箭头功能更改为:
const SampleNextArrow = props => {
const { className, style, onClick } = props
return (
<div
className={className}
style={{ ...style, display: 'block', background: 'red' }}
onClick={onClick}
/>
)
}
const SamplePrevArrow = props => {
const { className, style, onClick } = props
return (
<div
className={className}
style={{ ...style, display: 'block', background: 'green' }}
onClick={onClick}
/>
)
}
您可以覆盖默认的antd样式以删除::before
选择器并包含图标。
在LESS文件中:
.ant-carousel {
.slick-next {
&::before {
content: '';
}
}
.slick-prev {
&::before {
content: '';
}
}
}
在您的组件中(这意味着您正在使用上例中提供的组件):
import { LeftOutlined, RightOutlined } from '@ant-design/icons'
// ...
const SampleNextArrow = props => {
const { className, style, onClick } = props
return (
<div
className={className}
style={{
...style,
color: 'black',
fontSize: '15px',
lineHeight: '1.5715'
}}
onClick={onClick}
>
<RightOutlined />
</div>
)
}
const SamplePrevArrow = props => {
const { className, style, onClick } = props
return (
<div
className={className}
style={{
...style,
color: 'black',
fontSize: '15px',
lineHeight: '1.5715'
}}
onClick={onClick}
>
<LeftOutlined />
</div>
)
}
最后,所需的输出:
答案 3 :(得分:2)
如果要添加箭头,则可以使用Antd提供的箭头图标
<Carousel arrows nextArrow={<ArrowRightOutlined />} prevArrow={<ArrowLeftOutlined/>}>
由于箭头被Antd CSS隐藏,因此您可以使用以下命令在自己的CSS中覆盖箭头:
.ant-carousel .slick-prev,
.ant-carousel .slick-next {
color: unset;
font-size: unset;
}
.ant-carousel .slick-prev:hover,
.ant-carousel .slick-next:hover,
.ant-carousel .slick-prev:focus,
.ant-carousel .slick-next:focus {
color: unset;
}
答案 4 :(得分:1)
我正在使用反应钩。我刚刚找到了结果。 这是示例:
function SampleNextArrow(props) {
const { className, style, onClick } = props
return (
<div
className={className}
style={{ ...style, display: "block", background: "red" }}
onClick={onClick}
/>
)
}
function SamplePrevArrow(props) {
const { className, style, onClick } = props
return (
<div
className={className}
style={{ ...style, display: "block", background: "green" }}
onClick={onClick}
/>
)
}
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 8,
nextArrow: <SampleNextArrow />,
prevArrow: <SamplePrevArrow />,
}
<Carousel {...settings} arrows={true} draggable={true}>
{koompiApps.map((res, index) => {
return (
<Col xs={24} sm={24} md={24} lg={24} xl={24}>
<div
onClick={(e) => {
setAppsKey(`${index + 1}`)
}}
>
<center>
<motion.div
whileHover={{
scale: 1.1,
transition: { duration: 0.3 },
}}
whileTap={{ scale: 0.9 }}
>
<img
src={`${res.logo}`}
className="koompiApps "
alt={res.name}
/>
<h4 className="appsName">{res.name}</h4>
</motion.div>
</center>
</div>
</Col>
)
})}
</Carousel>
结果:
答案 5 :(得分:1)
只需遵循以下代码: 使用useRef钩子并将Ref分配给Carousel,然后通过refrence调用next和prev方法。
import React, { useRef, Fragment } from "react";
import { Carousel } from "antd";
const MyCarousel = () => {
const slider = useRef(null);
return (
<Fragment >
<Button onClick={() => slider.current.next()}>next</Button>
<Carousel ref={slider}>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</Carousel>
<Button onClick={() => slider.current.next()}>next</Button>
</Fragment >
)}
答案 6 :(得分:1)
当我们将 arrows
传递给 Carousel 时,它确实有效,但主要问题在于 CSS,因为 font-size
和 {{ 1}} 是 slick-prev
。
slick-next
和 0px
存在同样的问题
我可以推荐这个选项,它只会更改默认样式。 谢谢
slick-prev::before
slick-next::before
<Carousel autoplay arrows>
<div>Test1</div>
<div>Test2</div>
</Carousel>
答案 7 :(得分:0)
将prop arrows
设置为true,然后应显示下一个和上一个箭头。但是您看不到它,因为antd css将其设置为透明,可以通过将鼠标悬停在上面来感觉它们。
要使其可见,您可以安装slick-carousel npm,然后导入css:
@import "~slick-carousel/slick/slick";
@import "~slick-carousel/slick/slick-theme";
然后将箭头css设置为:
.ant-carousel .slick-arrow::before {
font-size: 24px;
font-family: 'slick';
color: #000;
}