传送门 react-slick
想实现类似这种样式的跑马灯
注意:使用npm下载的时候会要求你得jquery,typescript的版本有要求,需要下载符合条件的版本,否则会下载不下来。
代码:
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
...
// 跑马灯插件设置
const settings = {
slidesPerRow: 2,
rows: 2,
speed: 500,
slidesToScroll: 1,
initialSlide: 0,
};
...
...
<Col span={1}>
<div className="platform-right-arrow" onClick={(e) => getPrev(e)}>
<Image className="right-arrow" preview={false} width={12} height={12} src={require('@/assets/homePageIcon/left_arrow.png')} />
</div>
</Col>
{/* 管理平台列表 */}
<Col span={14}>
<Slider ref={slider} {...settings} className="platform-list" style={{ width: '103%' }}>{
platformList.map((v, index) => {
return (
<div className="platform" key={index} style={{ width: '42%' }}>
<div className='platform-block'>
<div className="list-title">{v.regionName}</div>
<div className="list-num">{v.regionTaskNumber}</div>
</div>
</div>
)
})
}
</Slider>
</Col>
...