react跑马灯插件react-slick使用

传送门 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>
...