优化Ant Design走马灯(Carousel)组件，增加前后翻页按钮

原有组件不足

原有的Carousel组件相关属性太少，翻页需要点击下面的dots来实现，由于dots很不明显，点击很困难（修改样式后还是很不容易点中），根据项目需求，增加了前后按钮，鼠标移动上去显示翻页按钮，实现了前后手动翻页功能。

实现效果

见下图

实现思路

增加前后按钮，捆绑Carousel组件的next()和prev()方法，改变button的不透明度，使得鼠标移动上去显示即可。

实现过程

js代码

render() {
    
    
    return (
      <Fragment>
        <Button
          className={
    
    styles.leftButton}
          style={
    
    {
    
     left: 26 }}
          onClick={
    
    () => {
    
    
          // 通过获取走马灯dom，调用Carousel的prev()方法
            this.card.prev();
          }}
        >
          <IconFont type="icon-previous" />
        </Button>
        <Button
          className={
    
    styles.rightButton}
          style={
    
    {
    
     right: 26 }}
          onClick={
    
    () => {
    
    
          // 通过获取走马灯dom，调用Carousel的next()方法
            this.card.next();
          }}
        >
          <IconFont type="icon-next" />
        </Button>
        <Carousel
          ref={
    
    e => {
    
    
          // 走马灯dom名card
            this.card = e;
          }}
          // autoplay
        >
          {
    
    this.renderRows()}
        </Carousel>
      </Fragment>
    );
  }

less文件

.leftButton {
    
    
  margin-top: 310px;
  border: none;
  outline: 0;
  padding: 0;
  height: 36px;
  width: 36px;
  transition: 3s;
  border-radius: 50%;
  background-color: #f8f8ff;
  color: #ff0000;
  position: absolute;
  top: 50%;
  z-index: 10;
  transform: translateY(-50%);
  text-align: center;
  font-size: 12px;
  cursor: pointer; // 鼠标指针移上去显示为“小手”
  opacity: 0.05;  // 默认不透明度0.05，几乎不可见
}

// 鼠标悬浮上去不透明度变为1，可见
.leftButton:hover {
    
    
  opacity: 1;
}