react.js antd carousel with arrows

Question

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         


        

Answer 1

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 (
      

        
         (this.carousel = node)} {...props}>
          

            
1
          
          

            
2
          
          

            
3
          
          

            
4
          
        
        
      
    );
  }
}