我最近开始学习 React,但在我的代码中实现 React Awesome Slider 时遇到了麻烦。 https://github.com/rcaferati/react-awesome-slider
这是我到目前为止的代码。我试图使 div 类项目作为滑块工作,但即使我得到了数据中所示的 3 个 id,它似乎只显示轮播中的第一个 id。
import "./Work.scss";
import { useState } from "react";
import AwesomeSlider from 'react-awesome-slider';
import 'react-awesome-slider/dist/styles.css';
export default function Work(){
const data = [
{
id: "1",
icon: "asset/mobile.png",
title: "Web Design",
desc:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. ",
img:
"https://99designs-blog.imgix.net/blog/wp-content/uploads/2018/10/attachment_100040756-e1538485934255.jpeg?auto=format&q=60&fit=max&w=930",
},
{
id: "2",
icon: "asset/globe.png",
title: "Mobile Application",
desc:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
img:
"https://i.pinimg.com/originals/e9/c9/2f/e9c92f7869d682a6fa5a97fb8a298f30.jpg",
},
{
id: "3",
icon: "asset/writing.png",
title: "Branding",
desc:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
img:
"https://i.pinimg.com/originals/a9/f6/94/a9f69465d972a004ad581f245d6ad581.jpg",
},
];
return(
<div className="work" id="work">
<h1>My Services</h1>
<div className="slider">
{data.map((d)=> (
<div className="container">
<AwesomeSlider>
<div className= "item">
<div className="left">
<div className="leftContainer">
<div className="imgContainer">
<img src= {d.icon}/>
</div>
<h2>{d.title}</h2>
<p>{d.desc} </p>
</div>
</div>
<div className="right">
<img src="https://99designs-blog.imgix.net/blog/wp-content/uploads/2018/10/attachment_100040756-e1538485934255.jpeg?auto=format&q=60&fit=max&w=930"/>
</div>
</div>
</AwesomeSlider>
</div>
))}
</div>
</div>
);
}
试试这个(codesandbox - https://codesandbox.io/s/musing-mclean-8ukzs?file=/src/App.js.
在您显示的代码中,
AwesomeSlider
嵌套在循环内,因此创建了它的多个实例。根据文档,应该只有一个实例来包装您的循环机制。
顺便说一句,在循环中,最后一个
src
标签有一个硬编码的 img
- 确保它引用对象数组中的字段:)。
import AwesomeSlider from "react-awesome-slider";
import "react-awesome-slider/dist/styles.css";
export default function App() {
const data = [
{
id: "1",
icon: "asset/mobile.png",
title: "Web Design",
desc:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. ",
img:
"https://99designs-blog.imgix.net/blog/wp-content/uploads/2018/10/attachment_100040756-e1538485934255.jpeg?auto=format&q=60&fit=max&w=930"
},
{
id: "2",
icon: "asset/globe.png",
title: "Mobile Application",
desc:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
img:
"https://i.pinimg.com/originals/e9/c9/2f/e9c92f7869d682a6fa5a97fb8a298f30.jpg"
},
{
id: "3",
icon: "asset/writing.png",
title: "Branding",
desc:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
img:
"https://i.pinimg.com/originals/a9/f6/94/a9f69465d972a004ad581f245d6ad581.jpg"
}
];
return (
<div className="App">
<AwesomeSlider>
{data.map((d) => (
<div className="item">
<div className="left">
<div className="leftContainer">
<div className="imgContainer">
<img src={d.icon} />
</div>
<h2>{d.title}</h2>
<p>{d.desc} </p>
</div>
</div>
<div className="right">
<img src="https://99designs-blog.imgix.net/blog/wp-content/uploads/2018/10/attachment_100040756-e1538485934255.jpeg?auto=format&q=60&fit=max&w=930" />
</div>
</div>
))}
</AwesomeSlider>
</div>
);
}
我用立方体动画来回答这个问题。请尝试一下
import AwesomeSlider from "react-awesome-slider";
import "react-awesome-slider/dist/styles.css";
import 'react-awesome-slider/dist/custom-animations/cube-animation.css';
export default function App() {
const data = [
{
id: "1",
icon: "asset/mobile.png",
title: "Web Design",
desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. ",
img: "https://99designs-blog.imgix.net/blog/wp-content/uploads/2018/10/attachment_100040756-e1538485934255.jpeg?auto=format&q=60&fit=max&w=930",
},
{
id: "2",
icon: "asset/globe.png",
title: "Mobile Application",
desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
img: "https://i.pinimg.com/originals/e9/c9/2f/e9c92f7869d682a6fa5a97fb8a298f30.jpg",
},
{
id: "3",
icon: "asset/writing.png",
title: "Branding",
desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
img: "https://i.pinimg.com/originals/a9/f6/94/a9f69465d972a004ad581f245d6ad581.jpg",
},
];
return (
<div className="App">
<AwesomeSlider animation="cubeAnimation">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</AwesomeSlider>
</div>
);
}
我已经实现了立方体动画的滑块代码,但我无法通过此滑块放置任何图像。似乎此滑块的伪代码无论如何都无法响应图像,,,我应该做什么?