关于antd Carousel的样式更改

显示左右箭头

<Carousel autoplay={true}  arrows={true} prevArrow={<h1>123</h1>} nextArrow={<h1>123</h1>}>
                <div>
                    <h3 style={contentStyle}>1</h3>
                </div>
                <div>
                    <h3 style={contentStyle}>2</h3>
                </div>
                <div>
                    <h3 style={contentStyle}>3</h3>
                </div>
                <div>
                    <h3 style={contentStyle}>4</h3>
                </div>
            </Carousel>

.ant-carousel .slick-prev,

.ant-carousel .slick-next,

.ant-carousel .slick-prev:hover,

.ant-carousel .slick-next:hover {

  font-size: inherit;

  color: currentColor;

}



.ant-carousel .slick-prev,

.ant-carousel .slick-prev:hover {

  left: 10px;

  z-index: 2;

  color: white;

}



.ant-carousel .slick-next,

.ant-carousel .slick-next:hover {

  right: 10px;

  z-index: 2;

  color: white;

}

修改指示点为圆点

.slick-dots li button {
  width: 10px !important ;
  height: 10px !important;
  background: rgb(163, 38, 217) !important;
  border-radius: 100% !important;
}
.slick-dots li {
  width: 23px !important ;
}
.slick-dots li.slick-active {
  width: 23px !important ;
}
.ant-carousel .slick-dots-bottom{
  /*bottom: -12% !important;*/
}

设置开始图片

 <Carousel
        autoplay
        arrows={true}
        //设置开始图片
        initialSlide={index}
        effect={"vertical"}
        autoplaySpeed={8000}
        prevArrow={<h1>123</h1>}
        nextArrow={<h1>123</h1>}
      >
        <div>
          <h3 style={contentStyle}>21</h3>
        </div>
        <div>
          <h3 style={contentStyle}>2</h3>
        </div>
        <div>
          <h3 style={contentStyle}>3</h3>
        </div>
        <div>
          <h3 style={contentStyle}>4</h3>
        </div>
      </Carousel>

修改切换方向

可以通过直接修改dotPosition实现