說明：使用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. 在要使用的元件中使用：引入

// 要展示的資料
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;
        }
      }