有坑，轮播 Loop 模式使用 Swiper9因为前阵子开发了一个 React 的轮播功能，遇到了如果需要文字动态，

因为前阵子开发了一个 React 的轮播功能，遇到了如果需要文字动态，在Clone项目上需要重置时，会导致动画无法连贯，所以就想说来看看目前的 Swiper 有没有这个问题。

於事，發現了他已經不使用 Clone 的方式了。

一般情況

1_7qXF3NzsA0FnSKqU8k4sfQ (1).gif

可以看到，一般情况下，该方法类似于实现轮播的一般方法。

遇到需要 Clone 的情況

我们从aria-label中的信息可以看出，active item被移动到第一个位置，然后序列继续。对于每一个动作，我们只需要激活 transition-duration 动画。运动完成后，动画停用，运动控制应锁定，直到运动完成。

但实际上是

// active 5 (is last)  
1 / 5 (-1496 * 0)  
2 / 5 (-1496 * 1)  
3 / 5 (-1496 * 2)  
4 / 5 (-1496 * 3)  
5 / 5 (-1496 * 4)  
  
// click next, active 1  
// then duration 0ms, transform: -4488px,  
// then duration: 900ms, transform: -5984px,  
// move  
2 / 5 (0)  
3 / 5 (-1496px)  
4 / 5 (-2992px)  
5 / 5 (-4488px)  
1 / 5 (-5984px)  
// then duration 0ms  
  
  
// click next, active 2  
// then duration 0ms, transform: -4488px,  
// then duration: 900ms, transform: -5984px,  
3 / 5 (0)  
4 / 5 (-1496px)  
5 / 5 (-2992px)  
1 / 5 (-4488px)  
2 / 5 (-5984px)  
// then duration 0ms

因为速度太快看不出破绽，下面是大概的重现方式

containerEl.style.transform = `translate3d(${-1904}px, 0px, 0px)`;
containerEl.style.transitionDuration = '0ms';
setTimeout(() => {
    containerEl.style.transform = `translate3d(${-3808}px, 0px, 0px)`;
    containerEl.style.transitionDuration = `${this._configurator.setting.moveTime}ms`;
}, 0);