gpt4 book ai didi

reactjs - 带箭头的react.js antd轮播

转载 作者:行者123 更新时间:2023-12-03 13:32:36 24 4
gpt4 key购买 nike

我正在考虑使用 antd Caroseul,但我还没有看到创建上一个/下一个或暂停按钮的示例。

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'));

最佳答案

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>
);
}
}

关于reactjs - 带箭头的react.js antd轮播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44114224/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com