如何在左右添加箭头来移动幻灯片?目前我必须按shift和滚动来移动它

Question

这里我只是映射videosdata并将其缩略图显示到flex滑块

Row.js

return (
<React.Fragment>
<div className="row">
<h2>Top Rated</h2>
<div className="row_thumbnails">
{videos.map((item) => (
<img
onClick={() => handleClick(item.id)}
key={item.id}
className="row_thumbnail rowLarge"
src={item.thumbnail}
alt={item.title}
/>
))}
</div>
</div>
</React.Fragment>
);

Row.css

.row {
color: white;
margin-left: 20px;
}
.row_thumbnails {
display: flex;
overflow-y: hidden;
overflow-x: scroll;
scroll-behavior: smooth;
padding: 20px;
}   
.row_thumbnails::-webkit-scrollbar {
display: none;
}
.row_thumbnail {
object-fit: contain;
width: 246px;
height: 138px;
margin-right: 15px;
transition: transform 450ms;
}   
.rowLarge {
width: 300px;
height: 150px;
}    
.row_thumbnail:hover {
transform: scale(1.08);
}    
.row6 {
margin-bottom: 10rem;
}

任何简单的方法来添加一些东西，如箭头，将有助于移动滑动条没有水平滚动。

Answer 1

好吧，有很多解决方案，但我怀疑它们是否"简单";或";quick"您必须跟踪窗口中元素的位置，然后将img容器的偏移量更改为img的宽度值。

TLDR: you don't need to implement your own img carousel, its not easy and quick solution. just use some library

然而，您可以使用一个外部库来为您执行逻辑。你只需要为它提供一个数据数组))

像这样:https://www.npmjs.com/package/react-multi-carousel