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;
        }
      }