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

Set prop arrows be true, and the next and prev arrow should appear. But you cannot see it because antd css set it to be transparent, you can feel them by hovering the mouse on.

To make them visible, you can install slick-carousel npm, and import the css:

@import "~slick-carousel/slick/slick";
@import "~slick-carousel/slick/slick-theme"; 

then set the arrow css like:

.ant-carousel .slick-arrow::before {
  font-size: 24px;
  font-family: 'slick';
  color: #000;
}