1.轮播图的原理
轮播图的原理是首先我们看到的比如是几张图片，但是实际上是有很多张图片，只不过我们在展示出来的父标签规定的宽度只能展示出五张，其他的通过overflow：hidden隐藏了，然后轮播图容器宽度就要承载很多张的图片，叙述出来感觉很古板。
编辑
其实就这么简单，两个盒子，父盒子展示，子盒子作为容器装图片，根据父盒子能展现的图片来展示。其他的隐藏在容器之中。这里用flex布局，所有的子盒子中的子元素全部横向排列。间隔是10px，而且添加动画效果，平滑滚动效果，transform。
这里明白之后，无非就是通过操作transform的属性translateX的值来让容器进行平滑滚动，向前向后来在父盒子中展示容器中的图片，那么轮播图就成功了，归根到底是我们希望我们动态的人为的去操作transform的属性translateX.
2.原生js实现
编辑
非常的简单，首先通过DOM选择器获取容器，以及操作轮播图的按钮，然后定义一个图片的宽度作为我们每次轮播图改变的translateX值，定义最大值为-itemWidth*2.7因为我现在展示的图片有5.3个，容器一共有8个所以自由改变。然后点击事件，点击的时候通过动态的改变currentPosition这个translateX的值来滚动容器的位置，这样轮播图就实现了。这里的Math.min判断两个数小的取出来。返回就是+一个图片的宽度，next就是-一个图片的宽度。初始为0.
2.React框架实现轮播图
那么React呢？这可是纯js来构建页面的标签元素，也就是说我们DOM是不应该出现的，我们只能用函数以及函数组件里面的HOOK来实现这个效果。
首先根据原生js实现的步骤，我们要拿到容器标签，然后通过修改transform中的translateX的值来实现轮播效果，怎么拿呢。没有DOM选择器，我们用函数组件的HOOK钩子。
编辑
直接把代码扔过来，我们看着讲解。通过ref去拿到容器标签（相当于纯js里面的id），然后container.current就是我们的容器标签了。那么currentPosition呢，我们总不能直接初始化一个值吧，我们初始化状态和更新状态的HOOK可以出山了。
编辑
初始化为0，而且调用setCurrentPosition可以更新前者。那么非常好，按钮点击事件，点击事件发生的时候调用更新函数，用箭头函数的形式来返回一个新的值newPosition，很好，这里我们拿到了container.current.style.transform以及他的translateX的值 currentPosition了。那么时候时候去改变呢，当点击事件发生的时候，也就是currentPosition改变的时候。我们需要去监听？
用HOOK解决吧。
编辑
这个HOOK当我们currentPosition更新的时候就立马执行回调函数，去给容器标签的transform定义一个translateX的值让它滚动到我们给的currentPosition的位置。
总结一下，轮播图核心原理，滑动translateX然后滚动容器。状态控制就是用currentPosition去改变滑动的位置。两种方式的区别react用HOOK去代替了DOM。
