如何实现 CSS 无缝轮播图？

Question

本人是初学者，准备模仿像 豆瓣读书 这种轮播图。我大概知道方法是设置 overflow: hidden 然后改变内容的 left 属性值，动画效果是 CSS transition。可是滑到最后一张怎么办？怎么无缝滑动到第一张？网上的教程说可以复制第一张，然后迅速切回初始位置。我试了一下：var a = $('.slide-list');a.append(a.children()[0].outerHTML);    // 复制第一帧附到最后$('btn-next').click(()=>{    curPos += width;                    // 更新到下一帧的位置    if (curPos > end) {        a.css('left', curPos+'px');     // 滑到了复制的那一帧        a.css('transition', 'none');    // 在切换前关闭动画        curPos = start;        a.css('left', curPos+'px');     // 切换回起始位置        a.css('transition', 'left ease 0.5s');    // 恢复动画    }    else        a.css('left', curPos+'px');})        可是没有预期的效果。请问正确的方法应该怎么做？ 谢谢~