画像スライダーでは、インジケータをクリックしたらcurrentIndexを更新し、transform: ( A )( -currentIndex * 100% )のように横に移動する。連続ループを表現するには先頭・末尾のクローンを用意し、トランジション終了時に位置を( B )で調整する。
解答
A: translateX
B: リセット（ジャンプ）/再配置
解説
横スライドはコンテナをtranslateXで移動するのがシンプル。無限ループ風にするにはクローンを使い、最後のスライドから最初へ瞬時に座標を戻す（DOM上の位置をリセット）処理をトランジション後に行う。
使用例（サンプルコード）
[ html ]
<div class="viewport">
<div class="track">
<img src="1.jpg"><img src="2.jpg"><img src="3.jpg">
</div>
</div>
<style>
.viewport{overflow:hidden;width:300px}
.track{display:flex;transition:transform .4s}
.track > img{width:300px;flex:0 0 100%}
</style>
<script>
let current = 0;
const track = document.querySelector('.track');
function go(i){
current = i;
track.style.transform = `translateX(${-current*100}%)`; // (A)
}
// 無限ループ対応は省略：transitionendで位置を( B )
</script>