Mouse over pauses hero carousel auto play [SOLVED]

Hello everyone! I made hero carousel (fullscreen) on HOME page as an advertisement with auto play, so it would cycle the images all the time…it works fine, but I noticed that when mouse is over the carousel it stops autoplay. When I roll over menu or something else it continues. Since the main thing on my HOME page is the carousel, the mouse basically all the time for user ends up on it…so nobody ends up seeing the rest of images but first one.
Maybe someone knows a code that I could write somewhere for the carousel? I know that it is possible for other similar programs that use coding but I haven’t found anything on this topic about Blocs.
Thanks for your time!

Ieva :upside_down_face:

1 Like

There needs to be an update with a toggle or option to stop the pausing, there is a command that allows for that.

So no fix for that now?

1 Like

Looking for a solution. Has anyone an idea to solve the problem?

Blocs is based on Bootstrap framework and this is the default carousel bootstrap behaviour.
While bootstrap carousel has some configuration options, they need to be provided in a script form in your webpage, after the bootstrap initialisation.

So you need to provide a workaround in Blocs. Prepare a text file (name it e.g. “carousel-hack.js”) and this is the content needed for disabling the pause on mouse over:

$('.carousel').carousel({
    "pause": "false"
});

Save the file on disk and in Blocs, use Blocs -> Page -> Settings -> Header File Attachments and place your file there. That’s it!

IMPORTANT: do not paste this code directly into the Page Settings -> Add Code. This goes to the top of the page, before the bootstrap initialization, so it won’t work. Header File Attachments, regardless of its name, places the additional code at the end of your webpage file, where it should go.

1 Like

Looks great but it doesn’t work for me. Is there an update for that code?

Hey @piotrek

If you use the Custom Attributes in the side panel you can disable pause on hover.

Select the Carousel…

Then using the Custom Attributes in the side panel add the following…

4 Likes

Works great! Thank you!

Thanks, Pete. Made my day.

1 Like

That‘s pretty interesting. Where would I find more about custom attributes and data classes for the use in Blocs?

I’ve spent hours searching for a solution to solve this issue. Thank you Pete.

Unfortunately this does not work with Bootstrap 5. Is there an other solution?

Yes, it does. Just use ‘data-bs-pause’.

1 Like

Now it works perfectly. Thanks for your help!

1 Like