Bookmarklet to stop carousel sliding: what am I doing wrong?

[semigeek]

I know some css, but easily get in trouble with js. Jscher provided a bookmarklet to fix a recent Google Maps glitch that disables its Labels checkbox:

Code: Select all

javascript:var btn=document.querySelector('button[jsaction=%22layerswitcher.intent.labels%22]');btn.removeAttribute('disabled');btn.click();void 0;

Now I'm trying to adapt a variant of this to stop a carousel image display on a website. I've learned that I have to add a new attribute data-bs-interval="false" to the div containing the carousel, and it works manually editing the HTML, but this code is not doing that:

Code: Select all

javascript:var csl=document.querySelector('div[id=%22carousel-img%22]');csl.addAttribute('data-bs-interval','false');void 0;

Adding quotes (%22) around "false" doesn't help. I'm probably just not using addAttribute correctly?

[morat]

I think addAttribute should be setAttribute.

Reference
http://developer.mozilla.org/docs/Web/A ... dAttribute
http://developer.mozilla.org/docs/Web/A ... tAttribute

Does the following bookmarklet work correctly?

Code: Select all

javascript:alert('test');void 0;

Maybe bookmarklets are blocked on that site. (violates the CSP)

[semigeek]

Thanks morat, you're right about "set" rather than "add"...

Code: Select all

javascript:var csl=document.querySelector('#carousel-img');csl.setAttribute('data-bs-interval','false');void 0;

Running this does now add the attribute to the HTML, but somehow still has no effect on the running carousel display, whereas adding the same thing as a manual edit does. What's the difference?

[semigeek]

Well, in reading about this "Bootstrap Carousel" (apparently popular for images) I stumbled upon a different/better way to do this that actually works, and by not referencing a specific ID seems likely to work also on other webpages with such a carousel:

Code: Select all

javascript:$('.carousel').carousel('dispose');void 0;

I'd be interested to hear whether anyone else finds this useful. Are there similar solutions for other types of carousels?

By the way, why do I have to use "$" here? I gather it's just shorthand for getElementById/querySelector, but if I use the syntax of my previous example I get the error "csl.carousel is not a function".

[morat]

The page is likely using a jQuery library with a jQuery carousel plugin.

Code: Select all

1. $("#foo").hide();
2. document.querySelector("#foo").hide();

Lines 1 & 2 are not equivalent since the .hide() method is only available with jQuery, not with standard JavaScript.

jQuery Hide
http://api.jquery.com/hide/

jQuery Quick API Reference
http://oscarotero.com/jquery/

[semigeek]

Thanks, that makes sense.

Incidentally, no carousel display I've tested (including Bootstrap) responds to the ui.prefersReducedMotion preference; I wonder whether anything does. So user js seems the only recourse.

[semigeek]

OK, now I'm trying to do the same thing for another popular carousel, Owl. I can stop it with "transform: none" in userContent.css, but am having trouble setting up a bookmarklet because setAttribute('transform','none') creates a useless new attribute "transform" instead of modifying the transform part of the existing "style" attribute (a longer string). How do I do that?

[morat]

Try these:

Code: Select all

element.style.transform = 'none';

Code: Select all

element.style.setProperty('transform', 'none');

Code: Select all

element.style.setProperty('transform', 'none', 'important');

[semigeek]

I had already tried the first, and the other two don't work either. The whole "style" string flashes yellow every time the carousel cycles, suggesting that these values are getting rewritten each time so changing them once the carousel is running does nothing... which also appeared to be true for Bootstrap carousel. So once again I need instead a direct call to stop Owl carousel, and saw a likely possibility on GitHub but it hasn't worked. At least I can stop Owl on a per-site basis with transform:none in userContent. (That works on something called MultiCarousel too.) Why don't these things simply have a STOP button?

[semigeek]

Are there similar solutions for other types of carousels?

Yes. Here's the syntax for LayerSlider and FlexSlider (selector might vary, examine the code):

Code: Select all

javascript:$('.ls-container').layerSlider('stop');void 0;

Code: Select all

javascript:$('.flexslider').flexslider('stop');void 0;