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>
...

react跑马灯插件react-slick使用相关推荐

react 用html插件,React配置过程中用到的插件汇总
●react插件 ●react-dom插件 ●react-router插件 ●react-redux插件 ●babel插件 ●webpack插件 ●loader插件 ●jquery插件 ●moment ...
jquery 立体走马灯_jQuery简单的文字跑马灯特效
插件描述:这是一款非常简单的jQuery文字跑马灯特效插件.该跑马灯特效使文本从右向左不停循环,当鼠标放到跑马灯上的文字时,跑马灯会暂停运动. 更新时间:2018/2/8 下午3:21:52 更新说明 ...
js在html中加文字走马灯特效,jQuery简单的文字跑马灯特效
插件描述:这是一款非常简单的jQuery文字跑马灯特效插件.该跑马灯特效使文本从右向左不停循环,当鼠标放到跑马灯上的文字时,跑马灯会暂停运动. 更新时间:2018/2/8 下午3:21:52 更新说明 ...
react native 安装插件
RN插件 1.字体库icons npm i react-native-vector-icons --save (要关联 rnpm link) 2.字符串string npm i query-strin ...
react实现异步插件_react项目优化之webpack
开门见山,由于我们项目的前端只有一个 bundle ,所有代码都在一个js文件里,随着功能不断的堆叠,体积已经到无法忍受的地步了(gzip后即将突破300k),导致首屏的时间不停的涨啊涨,最近一周富裕 ...
React Native图表插件
React Native图表插件react-native-charts-wrapper集成教程 https://www.jianshu.com/p/432517c5b531
React+Antd 无插件实现多个输入框验证码功能 + 倒计时(附完整代码)
需求如下图,实现多个框的验证码,并且在输入后自动调用接口思路在一个div中放置对应个数的span 使用一个input,然后让它透明,定位在div之上 span截取对应的值进行显示 Code 主要 ...
React学习笔记一(React入门+JSX+脚手架)
文章目录 1. React介绍和特点 1.1 React是什么 1.2 React的特点 2. React的开发依赖 2.1 React的三个依赖 2.2 Babel和React的关系 2.3 Rea ...
python组件的react实现_【React源码解读】- 组件的实现
前言 react使用也有一段时间了,大家对这个框架褒奖有加,但是它究竟好在哪里呢? 让我们结合它的源码,探究一二!(当前源码为react16,读者要对react有一定的了解) 回到最初根据react ...

react跑马灯插件react-slick使用

react跑马灯插件react-slick使用相关推荐

最新文章

热门文章