[英]Using react-multi-carousel but unable to use custom dots
如何获得此轮播的可点击自定义点。 我无法在列表项中绑定单击事件来移动轮播。 我需要在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
const CustomDot = ({ onMove, index, onClick, active }) => {
return (
<li
className={active ? "active" : "inactive"}
onClick={() => onClick()}
>
<MaximizeIcon />
</li>
);
};
const arrowStyle = {
background: "transparent",
border: 0,
color: "#fff",
fontSize: "80px"
};
const CustomRight = ({ onClick }) => (
<button className="arrow right" onClick={onClick} style={arrowStyle}>
<ArrowForwardIcon style={{ fontSize: "50px" }} />
</button>
);
const CustomLeft = ({ onClick }) => (
<button className="arrow left" onClick={onClick} style={arrowStyle}>
<ArrowBackIcon style={{ fontSize: "50px" }} />
</button>
);
工作演示: https://codesandbox.io/s/react-multi-carousel-customdot-3q0f4?file=/src/App.js:683-1052
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.