如何用React组件实现无缝轮播效果的长尾词？

本文共计1768个文字，预计阅读时间需要8分钟。

目录+ 正文- 无缝轮播- 实现思路- 构思使用时代代码结构- Carousel组件- CarouselItem组件- 完善组件- 完成小圆点- 正文字符- 需求是制作一个无缝轮播图，不是有很多现成的轮播吗？- 接下来了解到它确实有一个

目录

• 正文
• 无缝轮播
• 实现思路
• 构思使用时代码结构
• Carousel组件
• CarouselItem组件
• 完善组件
• 完成小圆点

正文

需求是做一个无缝轮播图，我说这不是有很多现成的轮子吗？后来了解到他有一个特殊的需求，他要求小圆点需要在轮播图外面，因为现在大部分插件都是将小圆点写在轮播图内部的，这对于不了解插件内部结构的小伙伴确实不知道如何修改。

很久没有写插件的我准备写一个插件（react）

无缝轮播

无缝轮播从最后一张到第一张的过程中不会原路返回，它就像轮子似的，从结束到开始是无缝连接的，非常自然地循环下去。

实现思路

轮播图的实现思路有很多，我们这里采用的是最简单的轮播图方案，如上图，即当轮播图轮播到第x张图片时，当前整个轮播图列表中只保留第x张图片，其余图片dom全部隐藏掉即可。