react圆柱轮播图

写在前面

最近需要做一个移动端轮播图，以达到下图的效果：

本来使用swiper，但效果不尽如人意。因为使用swiper实现的轮播图是水平排列的。比如Slide6是中间的图，那么我希望整个页面只显示Slide5，Slide6，Slide7，但若使用swiper，Slide5的左边仍会显示出一点Slide4，Slide7的右边也仍会显示出一点Slide8。而且在同事的手机微博中打开，动画效果十分诡异。当然，上述问题极有可能是因为我不太会使用swiper。但是时间紧任务重，我不想在此时去研究如何使用swiper来达到一个最好的效果，使得视觉和交互都满意。

所以，我决定还是自己动手写一个吧。

实现思想

下面是从上往下看的草图，是我大致想要实现的：

当手指向右滑动的时候，原left到top，原top到right，原right到bottom，原bottom中的一张卡片到left。

当手指向左滑动的时候，原right到top，原top到left，原left到bottom，原bottom中到一张卡片到right。

原理：原卡片dom位置不变，当左滑右滑时，卡片的className发生变化。再加上css动画效果，就可以实现符合要求的视觉和交互。（easy）

具体实现

1.创建一个继承React.Component的类并export。

2.覆盖构造方法：

  constructor(props) {
    super(props);
    this.state = {
      left: props.left || 0
    };
  }

【解释】我们只需要知道当前处于left的位置的卡片ind