javascript - 映射boostrap轮播项目时的.active类问题!(反应)
问题描述
我正在尝试映射一些引导轮播项目,但我认为我的问题出在 .active 类上,它们将一个映射到另一个上,而无法让我滑动它们,将下面的代码放到下面,希望有人能帮助我,呵呵.. .
<div id="charactersCards" className="carousel slide border border-warning rounded-lg" data-ride="carousel">
<div className="carousel-inner text-warning">
{!!store.character &&
store.character.results.map((char, i) => (
<div key={i} className="carousel-item text-center active">
<div className="card d-block w-100">
<img src="https://place-hold.it/400x200" className="card-img-top" alt="Image" />
<div className="card-body">
<h5 className="card-title">{char.name}</h5>
<p className="card-text text-white">{bio}</p>
<Link
className="btn text-warning border border-warning"
onClick={() => actions.currentCharId(i + 1)}
to={`/iPeopleCard/${i + 1}`}>
Learn More!
</Link>
<i
className="fas fa-heart mt-3 pt-4 ml-3"
onClick={() => actions.setCharToFav(i)}
style={
actions.characterFindInFav(i) ? { color: "yellow" } : { color: "white" }
}
/>
</div>
</div>
</div>
))}
</div>
解决方案
您需要有条件地设置“活动”类。因为现在您所有的轮播项目都有“活动”类。你可以这样做:
// instead of <div key={i} className="carousel-item text-center active">
// write the code below:
<div
key={i}
className={i === 0 ? "carousel-item text-center active" : "carousel-item text-center" }>
推荐阅读
- python-3.6 - 如何使用python3创建一个指向一个外部hdf5文件的链接数组?
- r - 在R中的df中校正多年的值
- javascript - 为什么 String.fromCharCode() 没有返回正确的字符?
- selenium-webdriver - 如何爬取硒中的所有网页?
- android - firebase云函数错误TypeError:无法读取未定义的属性“子”
- php - 找不到类 'Dropbox\AppInfo' - PHP
- laravel - 如何在 laravel 中存储访客用户的身份?
- postgresql - 在 docker 中为链接数据库容器安装 pgadmin III
- datetime - 搜索可供预订的物品
- python-3.x - 这怎么可能?最大子数组和