javascript - 如何在我的图像滑块上添加文本并使其对每个图像都不同?
问题描述
Banner.component.jsx
import "./banner.styles.scss";
import ImgComp from "./banner.image";
import i1 from "../../assets/banner-pics/1.jpeg";
import i2 from "../../assets/banner-pics/2.jpeg";
function Banner() {
let bannerArr = [<ImgComp src={i1} />, <ImgComp src={i2} />];
const [x, setX] = useState(0);
const goLeft = () => {
x === 0 ? setX(-100 * (bannerArr.length - 1)) : setX(x + 100);
};
const goRight = () => {
x === -100 * (bannerArr.length - 1) ? setX(0) : setX(x - 100);
};
return (
<div className="banner">
{bannerArr.map((item, index) => {
return (
<div
key={index}
className="slide"
style={{ transform: `translateX(${x}%)` }}
>
{item}
</div>
);
})}
<button id="goLeft" onClick={goLeft}>
<i class="fas fa-chevron-left"></i>
</button>
<button id="goRight" onClick={goRight}>
<i class="fas fa-chevron-right"></i>
</button>
</div>
);
}
export default Banner;
Banner.styles.scss
.banner {
position: relative;
width: 100%;
height: 800px;
box-sizing: border-box;
margin-bottom: 15px;
padding: 0;
display: flex;
align-items: center;
overflow: hidden;
i {
font-size: 2vw;
}
}
.slide {
position: relative;
min-width: 100%;
height: 100%;
transition: 0.5s;
overflow: hidden;
}
%btn-styles {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 10%;
height: 100%;
background: none;
border: none;
outline: none;
transition: 0.5s;
&:hover {
background: rgba(0, 0, 0, 0.356);
cursor: pointer;
i {
color: whitesmoke;
}
}
}
#goLeft {
left: 0;
@extend %btn-styles;
}
#goRight {
right: 0;
@extend %btn-styles;
}
我正在尝试在此滑块的顶部添加文本,并使其在每个图像上的书写方式不同,我将如何在每个图像上放置不同的文本覆盖?我只想在第一张图片上放一个带有按钮的段落,在第二张图片上放一个文字。
解决方案
您可以在数组上添加文本,也可以添加一些样式。
import "./banner.styles.scss";
import ImgComp from "./banner.image";
import i1 from "../../assets/banner-pics/1.jpeg";
import i2 from "../../assets/banner-pics/2.jpeg";
function Banner() {
let bannerArr = [
<div className="Item"><ImgComp src={i1} /><p className="custom-text">Text1</p></div>,
<div className="Item"><ImgComp src={i1} /><p className="custom-text">Text2</p></div>
];
const [x, setX] = useState(0);
const goLeft = () => {
x === 0 ? setX(-100 * (bannerArr.length - 1)) : setX(x + 100);
};
const goRight = () => {
x === -100 * (bannerArr.length - 1) ? setX(0) : setX(x - 100);
};
return (
<div className="banner">
{bannerArr.map((item, index) => {
return (
<div
key={index}
className="slide"
style={{ transform: `translateX(${x}%)` }}
>
{item}
</div>
);
})}
<button id="goLeft" onClick={goLeft}>
<i class="fas fa-chevron-left"></i>
</button>
<button id="goRight" onClick={goRight}>
<i class="fas fa-chevron-right"></i>
</button>
</div>
);
}
export default Banner;
关于全球风格
.item{
position: relative;
.custom-text{
position: abolute;
bottom: 15px;
}
}
推荐阅读
- c# - 代码仅运行一种方法,而不是第二种或第三种方法
- azure - 授予应用程序权限以读取我的活动目录的图形 api
- c# - TimeTrigger 函数中的错误
- python - Django模板如果选择字段
- python - PyTorch 自定义损失函数
- class - 如何避免在 Delphi 中对代码使用 inc 文件
- jenkins - 仅压缩目录内容(文件和子目录)
- azure - 从 Azure DevOps 部署期间是否可以管理 Verizon Premium CDN 的规则引擎?
- php - 一般错误:1366 字符串值不正确:'\xF0\x9F\x8D\xB8 !...'
- eclipse - 尽管使用了浅色主题,但 Eclipse 内容辅助浮出控件在黑色上显示不可读的深色