如何实现 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');

})

        

可是没有预期的效果。请问正确的方法应该怎么做？ 谢谢~