react实现文字垂直轮播

说明：使用antd组件走马灯，附上api链接：https://react-slick.neostack.com/docs/example/pause-on-hover

1. 第一步：下载安装：

　　npm install react-slick --save

　　npm install slick-carousel --save

　　 npm i --save-dev @types/react-slick（下载声明文件）

2. 在要使用的组件中使用：引入

import "slick-carousel/slick/slick.css";

import "slick-carousel/slick/slick-theme.css";

import Slider from "react-slick";

 

3.组件代码：

// 要展示的数据
const massComList = [
    { title: "上官街道出现打架斗殴事件" },
    { title: "上官街道出现打架斗殴事件" },
    { title: "上官街道出现打架斗殴事件" },
    { title: "上官街道出现打架斗殴事件" },
    { title: "上官街道出现打架斗殴事件" },
    { title: "上官街道出现打架斗殴事件" },
    { title: "上官街道出现打架斗殴事件" },
    { title: "上官街道出现打架斗殴事件" },
    { title: "上官街道出现打架斗殴事件" },
    { title: "上官街道出现打架斗殴事件" },
  ];
// 轮播的配置
  var settings = {
    dots: false, // 隐藏轮播小圆点
    infinite: true,
    slidesToShow: 5, // 展示5条内容
    slidesToScroll: 1,
    autoplay: true,
    vertical: true, // 垂直
    autoplaySpeed: 2000,
    pauseOnHover: false, // 鼠标悬浮不暂停
    arrows: false, // 隐藏翻页箭头
  };

return(
   <div className="massCom-listBox">
          <Slider {...settings} className="playSlider">
            {slider.map((v, k) => {
              return (
                <div className="massCom-List-item" key={k}>
                  {k + 1}、{v.title}
                </div>
              );
            })}
          </Slider>
        </div>
)

// 相关css
.massCom-listBox {
        height: 20vh;
        margin-top: 2vh;
        .playSlider {
          height: 20vh;
          overflow: hidden;
        }
        .massCom-List-item {
          background-color: #181933;
          margin-bottom: 1vh;
          color: #999aa6;
          height: 3vh;
          line-height: 3vh;
          font-size: 0.8rem;
          padding: 0 0.7vw;
        }
      }