【Antd】 走马灯Carousel自动轮播加左右切换箭头

发布时间 2023-05-17 13:19:59作者: 维多利亚的巴黎世家

组件内容:

 <Carousel 
   autoplay 
   afterChange={changeBanner} 
   autoplaySpeed={7000} 
   //添加左右切换箭头
   arrows={true} 
   prevArrow={<LeftOutlined />} 
   nextArrow={<RightOutlined />}>
 <Carousel/>

css样式:

.ant-carousel .slick-prev,
  .ant-carousel .slick-prev:hover,
  .ant-carousel .slick-prev:focus {
    font-size: inherit;
    left: 10px;
    z-index: 2;
    color: blueviolet;
  }

  .ant-carousel .slick-next,
  .ant-carousel .slick-next:hover,
  .ant-carousel .slick-next:focus {
    font-size: inherit;
    right: 10px;
    z-index: 2;
    color: blueviolet;
  }