Pause a jquery slideshow so that I can target the node element in chrome dev tools

Question

It may be a setting of some kind in the Chrome dev tools that I am missing. My goal is to pause a slideshow on my web site so that i can use the inspect element tool to target a html element and figure out the css that it uses? Clearly this is impossible to achieve while the animation is set to automatically run.

Is there a way of pausing the animation while I inspect the element for it's css properties?

Answer 1

If you go to the "Sources" tab in web inspector there's a pause button in the debug controls.

Unfortunately, you won't be able to right-click an element to inspect it when paused, but you can locate it using the magnifier icon or on the Elements tab by expanding and hovering over elements and observing the highlight in the main document.

Answer 2

If you want to pause a Bootstrap 4 carousel, you can open your Javascript console (⌘ + option + J on a Mac or ctrl+ shift + J on Windows for the Chrome Browser) and then type:

$('.carousel').carousel('pause'); // then press the [enter/return] key

Where the ".carousel" is the name of the class (hence the dot) that cointains the carousel. If it is an id, like #welcome you can just use:

$('#welcome').carousel('pause'); // then press the [enter/return] key