我的移动友好型、注重细节的轮播图组件🎠

GitHub：https://github.com/yifaneye/react-gallery-carousel
演示：https://yifaneye.github.io/react-gallery-carousel/（或https://yifanai.com/rgc）
npm： https: //www.npmjs.com/package/react-gallery-carousel

背景

问题在于，我使用并仔细分析过许多其他的轮播/滑块组件。我总结了 20 个常见问题：

有些幻灯片在用户滑动屏幕时不会移动。
大多数轮播图编辑器不支持鼠标拖拽来切换到上一张或下一张幻灯片。即使是支持鼠标模拟的编辑器，也有一些无法正确处理鼠标离开轮播图的情况，导致用户无法持续控制轮播图。
它们中的大多数不支持键盘导航（即左、右和 Tab 键）。
它们中的大多数都无法最大化为全屏/模态/灯箱模式。全屏模式下，还存在浏览器兼容性问题，例如 iPhone 上的 iOS Safari 浏览器不支持全屏 API。
大多数网站都没有简便的缩略图生成方案。即使有缩略图，也大多无法自由滚动，导致用户体验不佳。此外，大多数缩略图不支持懒加载。
它们中的大多数都无法实现图片懒加载（和预加载）。即使能够实现懒加载，大多数在用户切换到较远幻灯片时也会有中间图片的过渡效果，这违背了懒加载的初衷。
有些轮播图无法自动播放。即使可以自动播放，也无法自动暂停。例如，当用户切换到其他标签页或应用时，这些轮播图的自动播放不会暂停。
它们中的大多数都不遵守用户设置的降低运动幅度的设置。
他们中的大多数人忽略了滑动的速度，只是设置了一个恒定的过渡持续时间。
当轮播图中的图片/幻灯片尺寸不同时，部分轮播图的尺寸也会不同。当图片/幻灯片尺寸不同时，部分轮播图的过渡效果会显得不流畅。
它们中的大多数不支持在幻灯片中自定义元素。
它们中的大多数都无法设置为从右到左（RTL）显示。
有些插件会禁用捏合缩放功能，而有些插件在双指捏合时会出现故障。此外，当窗口放大时，大多数插件仍然会检测到触摸滑动来切换到上一张或下一张幻灯片，而大多数用户在这种情况下真正想要的是平移来查看当前幻灯片的其他部分。
有些情况下，当窗口大小改变或移动设备方向改变时，幻灯片会卡在原来的位置，直到用户再次交互。
有些组件只能预先设置好图像（例如在轮播组件安装之前）。
它们中的大多数都没有提供备用图像的解决方案（当图像不可用时）。
当用户双击控件时，其中一些图像会放大，而大多数用户在这种情况下的目的是在下一张幻灯片之后快速跳转到下一张幻灯片。
有些幻灯片会移除左侧或右侧的按钮，以表明该方向没有更多幻灯片。然而，用户很可能会点击按钮原本所在的位置，从而导致一些意外行为，例如点击该位置的链接或按钮。
有些开发者使用克隆第一张和最后一张幻灯片的方法来实现循环（或无限循环）。我认为这种方法在语义上并不理想。
有些用户无法区分垂直滑动和水平滑动，因此，不完全垂直的滑动会使幻灯片略微水平移动；而不完全水平的滑动会使（文档）页面略微垂直移动。