这样也是自己得一个学习笔记，跟着大佬敲一次。冲鸭!

首先：父组件Slider，三个子组件：SliderList、SliderArrows、SliderDots目录index.jsindex.lessSlider.jsSliderArrows.jsSli

react-slider 是一个图片轮播的组件，支持的配置有 图片（必须好不好，要不然轮播毛）、轮播图片的速度、是否自动轮播、自动轮播的时候鼠标放上去是否暂停、自动轮播速度、是否需要前后箭头、是否需要 dot （我不知道怎么表述好，反正意思你懂）。

最近项目中需要用到轮播图，我立马想起了 swiper ，那么本文就来带大家体验一下如何在 React 中使用这个插件，并且有哪些需要注意的地方。

前言 第一版 无缝滑动原理: 红色的1, 3都是克隆的过渡元素. index从 3 4 动画结束时，马上将指针滑动到1， 这样就可以实现无缝轮播. 下面上js动画伪代码 Carousel.tsx 这样

效果图普通轮播图卡片式轮播图堆叠式轮播图普通轮播图普通轮播图-演示普通轮播图-源码思路：如上图所示，假设有三张图片进行轮播，绿色区域是显示区域，其它部分都是隐藏的页面渲染时,会多选择两张图片，图中数字

之前放假在家的时候，群里有一个朋友问我，有没有无缝轮播的思路，百度了一下，原来无缝轮播指的是传统轮播图中最后一张轮播图下一张是第一张轮播图，不会穿过中间的轮播图。 其实思路是很简单的，但是仔细一想这里有个不好的点，就是这句代码。 我们移动了装载图片的容器造成左移，但是最后又把它…