javascript - 在 React 中根据用户偏好动态更改 react-slick 滑块点图标
问题描述
嗨,我使用 react-slick 滑块进行了一些自定义。
我有两个 png 点图标,可以动态更改(用户可以从管理部分更改并将前端作为 API 数据返回)
../navigator.png
and
../navigator-active.png
sliderSettings = {
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
appendDots: dots => {
return <ul style={{ margin: '0px' }}>{dots}</ul>;
},
customPaging: (pagi, i) => {
const style = {
width: 13,
height: 13,
display: 'inline-block',
backgroundImage: `url(../navigator.png )`, // need to change as navigator-active.png this when active
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
};
return <a className="slick-dot" style={style} />;
},
};
是否可以添加活动图标,需要将默认点图标更改为活动点图标
解决方案
你可以试试这个,只需使用setState记录当前silde索引,并根据它改变样式。
render() {
var settings = {
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
appendDots: dots => {
return <ul style={{ margin: "0px" }}>{dots}</ul>;
},
beforeChange: (prev, next) => { // here to detect slide change
this.setState({ currentSlideIndex: next });
},
customPaging: (pagi, i) => {
const style = {
width: 13,
height: 13,
display: "inline-block",
backgroundImage: `url(../navigator.png )`, // need to change as navigator-active.png this when active
backgroundSize: 'contain',
backgroundRepeat: "no-repeat"
};
const activeStyle = {
width: 13,
height: 13,
display: "inline-block",
backgroundImage: `url(../navigator-active.png )`,
backgroundSize: 'contain',
backgroundRepeat: "no-repeat"
};
return (
<a
className="slick-dot"
style={pagi === this.state.currentSlideIndex ? activeStyle : style}
/>
);
}
};
推荐阅读
- javascript - 是否可以从单个客户端获得多个 socket-io 连接而不会丢失以前的套接字
- mysql - MySQL加入最小和最大日期
- vb.net - “'Microsoft.ACE.OLEDB.12.0' 提供程序未在本地计算机上注册”Win 10 64 位
- autowired - Symfony 3.4:如何将服务注入实体监听器?
- javascript - 如果 JavaScript 中一个函数有多个函数定义,为什么最后一个实现会优先?
- unity3d - StaticVar 分数在 HTML5 WebGL 中不起作用
- node.js - 集成 Billdesk 支付网关时出现无效的商家详细信息 (ERRP004) 错误
- macos - 为什么 macOS“Big Sur”上终端中的 ksh 的 vi 模式有时会损坏编辑行?
- audio - ffmpeg 在开始和结束之前将广告音频文件添加到原始音频文件
- angular - 在服务中使用 FormArray 时的 OnPush 更改检测