javascript - 如何使用自定义按钮控制 react-bootstrap 轮播?
问题描述
在这里,我需要使用自定义按钮控制轮播幻灯片,我在此示例的帮助下实现了这一点。
这是它的代码..
import React, { useState } from "react";
import { Carousel, Button, Container, Row } from "react-bootstrap";
import Cards from "../cards";
import "./slider.css";
const Slider = () => {
const [index, setIndex] = useState(0);
const handleSelect = (selectedIndex, e) => {
setIndex(selectedIndex);
};
const onPrevClick = () => {
if (index > 0) {
setIndex(index - 1);
} else if (index === 0) setIndex(2);
};
const onNextClick = () => {
if (index === 2) {
setIndex(0);
} else if (index === 0 || index > 0) setIndex(index + 1);
};
return (
<>
<div className="button-container">
<Container>
<Row>
<Button variant="primary" onClick={onPrevClick}>
Previous
</Button>
<Button variant="primary" onClick={onNextClick}>
Next
</Button>
</Row>
</Container>
</div>
<Carousel
activeIndex={index}
onSelect={handleSelect}
indicators={false}
controls={false}
>
<Carousel.Item>
<Cards />
</Carousel.Item>
<Carousel.Item>
<Cards />
</Carousel.Item>
<Carousel.Item>
<Cards />
</Carousel.Item>
</Carousel>
</>
);
};
export default Slider;
但是当活动索引在最后一个项目中时,这意味着在最后一个轮播幻灯片中。当我按下下一个按钮时,它会从最后一个旋转木马一直移动到第一个旋转木马,即方向就像 3 -> 2 -> 1。
我知道我在 onClick 函数中做了一些糟糕的逻辑。因此,我正在寻求帮助,向我建议使用自定义按钮控制轮播幻灯片的最佳方法,非常感谢您的帮助。请查看我的代码并告诉我任何建议。提前致谢。
这是代码沙箱链接
解决方案
使用该ref
属性,您可以控制prev
和next
动作
const ref = useRef(null);
const onPrevClick = () => {
ref.current.prev();
};
const onNextClick = () => {
ref.current.next();
};
JSX
<Carousel
ref={ref}
...
>
推荐阅读
- c++ - `clog` 被缓冲了吗?
- arrays - 如何将 JSON 转换为 Postgres 存储过程中的行
- powershell - Get-WinEvent 与匹配 TimeCreated
- javascript - React.js 中的引导程序 - 导航栏折叠不起作用
- spyder - Spyder 5 禁用警告:“未找到 QCoreApplication 实例。未应用应用程序补丁”
- json - 如何处理这种地图数据
- python - 链接 *= += 运算符
- python - 在 Python 中处理大量的问题
- javascript - 节点不等待循环完成
- reactjs - 在 React.js 中单击按钮时如何切换类