javascript - 在反应轮播中添加幻灯片动画
问题描述
我正在尝试使用纯 JS 和 React重新制作轮播。react-bootstrap
到目前为止,我的轮播每隔几秒钟就会自动切换到下一张幻灯片并循环回到开头。它还可以在单击按钮时显示特定的轮播幻灯片。
但是,我无法复制从右到左的滑动动画,因为我正在使用slice
渲染我的幻灯片。我将如何编辑我的代码以包含像引导程序这样的滑动动画?
import React, { useState, useEffect } from "react";
import "./styles.css";
const slides = [
{
src:
"https://res.cloudinary.com/tpostr/image/upload/v1553865338/paparouna/IMG_7638-01.jpg",
alt: "slide 1",
caption: "slide 1"
},
{
src:
"https://res.cloudinary.com/tpostr/image/upload/v1553865338/paparouna/IMG_7621-01.jpg",
alt: "slide 2",
caption: "slide 2"
},
{
src:
"https://res.cloudinary.com/tpostr/image/upload/v1553865337/paparouna/IMG_7615-01.jpg",
alt: "slide 3",
caption: "slide 3"
}
];
export default function App() {
const [start, setStart] = useState(0);
const [end, setEnd] = useState(1);
const first = () => {
setStart(0);
setEnd(1);
};
const second = () => {
setStart(1);
setEnd(2);
};
const third = () => {
setStart(2);
setEnd(3);
};
useEffect(() => {
const timeout = setTimeout(() => {
setStart((start) => start + 1);
setEnd((end) => end + 1);
}, 3000);
if (end === slides.length + 1) {
setStart(0);
setEnd(1);
}
return () => {
clearTimeout(timeout);
};
}, [start, end]);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
{slides.slice(start, end).map((slide, i) => (
<div key={i}>
<img src={slide.src} alt={slide.alt} />
<p>{slide.caption}</p>
<button onClick={first}>first</button>
<button onClick={second}>second</button>
<button onClick={third}>third</button>
</div>
))}
<p>{start} start</p>
<p>{end} end</p>
</div>
);
}
我的密码箱
解决方案
推荐阅读
- javascript - Next.js 为 Link 组件中的嵌套动态路由添加当前路径
- php - Laravel 8:从 ChildClassTest 测试 MainClassTest
- css - 打印视图中的角材料表
- javascript - 这个功能是如何工作的?函数(oFREvent)
- wordpress - 注意:未定义的偏移量:多页 Wordpress 插件
- java - java.lang.ClassCastException:[Ljava.lang.Object;不能转换为 [Ljava.lang.Comparable; 即使类型应该相同
- swift - MacOS 应用程序无法重新打开自动保存的文件
- python-3.x - 如何一次只允许一个人使用不和谐机器人
- python-3.x - 寻求有关在 Python 中使用 BFS 创建迷宫的建议
- python - 如何使用 Python Difflib 仅输出文件之间的新增内容?