react.js antd 带箭头的轮播 [英] react.js antd carousel with arrows

查看：107
本文介绍了react.js antd 带箭头的轮播的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

const { Carousel } = antd;ReactDOM.render(<轮播自动播放><div><h3>1</h3></div><div><h3>2</h3></div><div><h3>3</h3></div><div><h3>4</h3></div></旋转木马>, document.getElementById('app'));

解决方案 

import React, { Component } from "react";import { Carousel, Icon } from "antd";导出默认类 CarouselComponent 扩展组件 {构造函数(道具){超级(道具)；this.next = this.next.bind(this);this.previous = this.previous.bind(this);this.carousel = React.createRef();}下一个() {this.carousel.next();}以前的() {this.carousel.prev();}使成为() {const 道具 = {点:对，无限:真实，速度:500，幻灯片显示:1，幻灯片滚动:1};返回 (<div><Icon type="left-circle" onClick={this.previous}/><轮播参考={节点=>(this.carousel = node)} {...props}><div><h3>1</h3>

<div><h3>2</h3>

<div><h3>3</h3>

<div><h3>4</h3>

</旋转木马><Icon type="right-circle" onClick={this.next}/>

);}}

I am looking at using the antd Caroseul, but I've not seen an example that creates a prev/next or pause button. 

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

这篇关于react.js antd 带箭头的轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆