轮播图的类时间轴控制，真的是找到方法了

有个非常常见的功能，类似于tab栏切换或者时间轴切换，但是内容和这个「轴」是同步的，这个肯定是有见过的。最近在实现这样一个功能，想了想还是使用插件，比较方便。在看了 element ui 和 ant 之后，还是决定使用 Swiper 这个老牌插件。。。

！！！🤡 难过的事情来了，有个功能是 Controller ，但在实现的过程中不是「居中」搞不定，就是「无法同步」，折磨了我好久。。。 github、掘金、知乎等能查阅的社区都逛遍了，依然找不到例子，有些例子是「像」，如使用「缩略图」实现的。有些更是离谱，就从官网文档copy一些属性出来，就成一篇文章了，在 掘金和 CSDN 里比比皆是。AI 也搞不懂，吭哧吭哧地写了一大堆，没什么用，也可能是免费的模型能力太差的原因，有实力的可以试试高级模型在同一个prompt下行不行。

踩过坑了，在 swiper的控制 里有踩坑过程...

经过日复一日的调试，恰巧就发现了那个「G」点。一句话就是多个可视卡片时，把两边的往左右移，具体实现可以看看上面的例子。

 cardSwiperInstance.current = new Swiper(cardSwiperRef.current, {
    modules: [Controller],
    slidesPerView: 5,
    spaceBetween: 10,
    grabCursor: true,
    centeredSlides: true,
    loop: true,
    slidesOffsetBefore: x, // 偏移量 把左边两个移走
    slidesOffsetAfter: x, // 偏移量 把右边两个移走
  });