其他分享
首页 > 其他分享> > react实现文字垂直轮播

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

 

  

 

标签:垂直,上官,轮播,title,slick,react,街道,打架斗殴
来源: https://www.cnblogs.com/shyhuahua/p/15152303.html