【文件属性】:
文件名称:react-carousel
文件大小:220KB
文件格式:ZIP
更新时间:2021-04-03 09:53:09
JavaScript
React转盘
使用React Hooks的简单React轮播。
轻的
没有外部库
React灵敏
可在手机上滑动
有子弹头分页
无限滚动,但如果您愿意,我在组件>轮播> index.js中列出了无无限滚动的代码
继续并使用轮播的代码并对其进行编辑,但是您需要用例。 我将其放置在这里是出于我自己的目的,也是为了社区的需要,因为花了我一段时间才创建了这个轻量级的自定义组件。 外部库只是包含了我不需要的太多功能,因此很难使用。
注意:我正在使用的照片非常大,这就是为什么某些图片有一瞬间的白色幻灯片的原因
轮播的工作方式
并排放置图像
定义固定长度的div,该长度与图像的宽度相同
设置div溢出:隐藏
创建事件侦听器(触摸和单击),以将X轴上的div转换为(index * imgWidth)
参考: :
无限滚动
无限轮播在以上条件下起作用。
假设我们有一个Array = [1、
【文件预览】:
react-carousel-main
----package.json(818B)
----src()
--------App.css(564B)
--------index.js(500B)
--------reportWebVitals.js(362B)
--------data()
--------logo.svg(3KB)
--------App.test.js(246B)
--------setupTests.js(241B)
--------components()
--------App.js(698B)
--------index.css(366B)
----.gitignore(310B)
----public()
--------logo192.png(5KB)
--------manifest.json(492B)
--------robots.txt(67B)
--------index.html(2KB)
--------icons()
--------logo512.png(9KB)
--------favicon.ico(4KB)
----README.md(3KB)
----yarn.lock(496KB)