将内部div从CSS Jquery Javascript开始移动到重复

我试图在angularJs中实现一个类似转盘的组件，其中一个div被放置在第二个div中，如下图所示

单击数字3，使用transition left，我将内部div向左移动一个块的长度，这样平滑动画就可以很好地就位了

现在我正试图做到这一点：因为数字3是最后一个块，我想再次显示数字1块，也就是说使div无限旋转

我尝试过切掉块1并将其添加到div的末尾，但这会消除动画，因为div的左侧已更改

所以基本上我在寻找一种在另一个div中重复div的方法

---

欢迎任何想法。

下面的示例将克隆下一个项目并将其添加到末尾，然后单击“上一步”时，如果该项目已克隆，则将删除该项目

这不适用于反向操作-这意味着在原始第一张幻灯片上单击

prev

，将不会在开头添加任何内容

注意：如果用户决定继续单击“下一步”，则项目将继续克隆

$（文档）.ready（函数（）{
变量$wrap=$（'.img wrapper'），
c_length=$wrap.children（）.length，
n_指数=0；
$（'.prev'）。单击（函数（）{
变量$a=$（'.img.active'），
$b=$a.prev（）；
如果（$b.length==0）{
回来
}
$a.removeClass（“活动”）；
如果（$a.hasClass（'cloned'））{
如果（n_index==0）{n_index=c_length-1；}其他{n_index--}
setTimeout（函数（）{$a.remove（）；}，300）；
}
$b.addClass（“活动”）；
$wrap.css（'left'，-$b.position（）.left）；
});
$（'.next'）。单击（函数（）{
变量$a=$（'.img.active'），
$b=$a.next（）；
如果（$b.length==0）{
$b=$wrap.find（'[data index=“'+n_index+''''“]）.eq（0.clone（）；
$b.addClass（“克隆”）；
$b.insertAfter（$a）；
如果（n_索引+1==c_长度）{
n_指数=0；
}否则{
n_索引++；
}
}
$a.removeClass（“活动”）；
$b.addClass（“活动”）；
$wrap.css（'left'，-$b.position（）.left）；
});
});
*{
框大小：边框框；
}
旋转木马{
宽度：400px；
填充：20px；
溢出：隐藏；
高度：200px；
保证金：自动；
位置：相对位置；
}
.img包装{
空白：nowrap；
位置：绝对位置；
左：0；
排名：0；
字号：0；
转换：左.3s，右.3s；
}
.img{
宽度：400px；
高度：200px；
填充：40px 80px；
字体大小：32px；
颜色：#fff；
背景：灰色；
显示：内联块；
}
.img.static.active{
位置：绝对位置；
}
.转盘按钮{
位置：绝对位置；
顶部：20px；
填充物：5px10px；
z指数：5；
背景：#eee；
}
上一篇{
左：0；
}
.下一个{
右：0；
}

上
IMG 1
IMG 2
IMG 3
下一个
您可以尝试复制位于其他div前面的第一个元素
z-index
或
位置：绝对激活后，后面的div将恢复到原始位置。