标签：垂直 上官 轮播 title slick 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。