画像スライダーの自動再生はsetIntervalで定期的にnext()を呼ぶが、ユーザーがホバー中は一時停止したい。これはコンテナにmouseenterでclearInterval(timer)、( B )で再開する。パフォーマンス的にはDOM幅計測の回数を減らすため、( A )を事前に保持しておく。
解答
A: スライド幅（1枚分の幅）
B: mouseleave
解説
毎回getBoundingClientRect()で幅を測るとコストがかかる。レイアウトが安定しているなら初期化時に幅を保存して使い回す。ホバー中のmouseenter/leaveでオートプレイの停止/再開を実装する。
使用例（サンプルコード）
[ html ]
<div class="viewport">
<div class="track">
<img src="1.jpg"><img src="2.jpg"><img src="3.jpg">
</div>
</div>
<script>
const viewport = document.querySelector('.viewport');
const track = document.querySelector('.track');
let idx = 0, timer = null;
const slideWidth = viewport.clientWidth; // (A)
function start(){ timer = setInterval(()=> go((idx+1)%3), 2500); }
function stop(){ clearInterval(timer); timer = null; }
function go(i){ idx=i; track.style.transform = `translateX(${-idx*slideWidth}px)`; }
viewport.addEventListener('mouseenter', stop);
viewport.addEventListener('mouseleave', start); // (B)
start();
</script>