时间戳

首页 > 解决方案 > 如何在反应中用左右箭头滑动多个图像？

javascript - 如何在反应中用左右箭头滑动多个图像？

问题描述

我有一个每行 10 个电影项目的集合网格。我正在寻找一种方法来水平滑过这个网格，左右两端都有箭头，就像 netflix 网格一样。有什么简单的方法可以做到这一点？

https://i.ibb.co/VJ52mg2/Screenshot-27.png

<div className="collection-preview">
<h1 className="title">{title.toUpperCase()}</h1>
  <div className="preview"> 
  {     
        movies
        ? (movieData.map(({id, ...otherProps}) => <CollectionItem key={id} {...otherProps} />))
        : null
  }
  {
        tvshow
        ? (tvData.map(({id, ...otherProps}) => <CollectionItem key={id} {...otherProps} />))
        : null
  }

  </div>
  </div>

标签： javascriptcssreactjs

解决方案

有 n 个可用的反应库。这里我列出了一些库，

反应光滑

https://www.npmjs.com/package/react-slick

试试演示链接， 点击这里

React 多轮播

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

尝试图像和视频的演示链接，单击此处

试试这个自定义元素的演示链接，点击这里

希望它对你有帮助:)

推荐阅读