カルーセルの自動再生を DevTools から止める JS スニペット集

2026-04-10

Studio の公開サイトなど、自分でソースを触れないページでカルーセルが動き続けて検証しづらいとき、DevTools のコンソールに貼るだけで止められるスニペットをまとめました。

まず試す：`setInterval` を全停止

多くのカルーセルは内部で setInterval を使って自動送りしています。ID を総当たりでクリアすると、大抵はこれだけで止まります。

for (let i = 1; i < 99999; i++) clearInterval(i);

ページ上の他のタイマー（カウントダウン等）も一緒に止まります。検証が終わったらリロードすれば元に戻ります。

setInterval ではなく CSS の animation や transition で動いているケースに対応します。

document.querySelectorAll('*').forEach(el => {
  el.style.animationPlayState = 'paused';
  el.style.transition = 'none';
});

requestAnimationFrame ベースのアニメーションも含めて止めたい場合、関数自体を上書きします。

window.requestAnimationFrame = () => {};
for (let i = 1; i < 99999; i++) {
  clearInterval(i);
  clearTimeout(i);
}

これはかなり強力で、ページ上のほぼすべてのアニメーション・タイマーが停止します。

使われているライブラリが分かっている場合は、API 経由で autoplay だけを止められます。

document.querySelector('.swiper')?.swiper?.autoplay?.stop();

$('.slick-slider').slick('slickPause');

document.querySelector('.splide')?.__splide?.Components?.Autoplay?.pause();

どのライブラリか分からないときは、DevTools の Elements パネルでスライダー要素のクラス名（swiper、slick-slider、splide など）を見ると判別できます。