How to stop auto slide bootstrap carousel

I Need Help
1

Hello guys

I have created a FullScreen Slider in the Hero area.
But the user has the mouse pointer mostly directly in the middle, so he can’t see the Gallery images?!
That’s why I would like to disable the auto stop slide.
There seems to be a solution: auto slide off in bootstrap carousel - Code Examples & Solutions

Unfortunately I am not a ‘coder’.
Here is my question: Where and how can I add the code?
i have tried this and put it into ‘Project Header’:

But looks like its wrong. The Name from the carousel is ‘carousel-28408’.

thanks for the help.

2

No need for any code. You can control this with custom attributes.

If you are using Bootstrap 5 that code you referenced won’t work anyway. As it’s using JQuery.

data-bs-pause=hover

3

Pete, isn’t it data-bs-pause=false?
That’s what I use and it works.

4

This i would Like to fix it:

|pause|string | boolean|'hover'|If set to 'hover' , pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave . If set to false , hovering over the carousel won’t pause it.

On touch-enabled devices, when set to 'hover' , cycling will pause on touchend (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.|

5

It can be either. You will see in the docs “string / Boolean”

6

Good to know.
Thanks Pete

7

Hey guys

And how looks now the Solution? :relaxed::grin:
Where can i change the Option?

Thanks

8

With the carousel selected, you will see an option on the right side panel of Blocs and towards the bottom an option for custom attributes. You add it here.

1 Like
9

Maybe that helps
carousel

2 Likes
10

Aaaaahhh…:+1::smiley:.
I thought i have to write it in the Code Editor.
Now everything clear.
Thanks you so much.

11

Hi,
I need to stop carousel on mobile device on click It should work on touch-enabled devices The carousel does not stop on my touches. I have used Carousel · Bootstrap.