reactjs - 使用 react-multi-carousel 但无法使用自定义点
问题描述
如何获得此轮播的可点击自定义点。我无法在列表项中绑定单击事件来移动轮播。我需要onClick
在li
项目之间进行适当的实现以单击轮播中的上一个和下一个项目
这是链接代码框中的完整代码
const CustomDot = ({onMove,index,onClick,active}) => {
return (
<ol class="carousel-indicators">
<li data-target="#main-slide" data-slide-to="0" className={active ? "active" : "inactive"}
>How t bind the click event list item
onClick={() => onClick()}>{React.Children.slide1}</li>
<li data-target="#main-slide" data-slide-to="1" className={active ? "active" : "inactive"}
onClick={() => onClick()}>{React.Children.slide2} </li>
<li data-target="#main-slide" data-slide-to="2" className={active ? "active" : "inactive"}
onClick={() => onClick()}>{React.Children.slide3} </li>
</ol>
);
};
解决方案
问题是插件期望接收单个元素(li
例如),CusomtDot
但您传递了一个列表(ol
带有一些子元素)。
解决方案,传递一个元素,如下所示:
const CustomDot = ({ onMove, index, onClick, active }) => {
// onMove means if dragging or swiping in progress.
// active is provided by this lib for checking if the item is active or not.
return (
<li
className={active ? "active" : "inactive"}
onClick={() => onClick()}
>
{index + 1}
</li>
);
};
工作演示:https ://codesandbox.io/s/react-multi-carousel-customdot-jwkfo
推荐阅读
- r - 在 R 中解析日期
- bash - 什么是无效的间接扩展,为什么它会阻止我安装这个程序?
- asp.net-mvc - MVC 表单加载中的图像但在 Chrome 中不可见
- pandas - 取消堆叠具有重复项的多索引
- python - 使用 python 中的请求将订单发布到 oanda API
- java - spring boot UTF8 编码
- laravel - Laravel 隐式模型绑定
- r - 几个 seurat 对象上的 PercentageFeatureSet()
- excel - 循环通过powerpoint幻灯片根据幻灯片写入数据
- javascript - ES6 继承强制基类只调用自己的成员