How to use Pause() method to stop slider on Hover in Tailwind CSS Carousel - Flowbite

[kuhashmi1974]

Hi, I am using Flowbite Default Carosul (Auto Play) . Know i want to pause the slider on hover. Contacted the support and due to lack to knowledge of Javascript I am not able to execute the pause() method. I their reply They gave me this information

You can use the instance manager to get the Carousel instance: https://flowbite.com/docs/getting-started/javascript/#instance-manager Something like: const carousel = FlowbiteInstances.getInstance('Carousel', 'your-carousel-id'); And then do something like: In JavaScript if the mouse is over the element, then call carousel.pause();

Know I use The script

<script type="application/javascript">               
            const carousel = FlowbiteInstances.getInstance('Carousel', 'default-carousel');       
        </script>

Then call the carousel.pause(); like that <div id="default-carousel" class="relative w-full" data-carousel="slide" onmouseover="carousel.pause();"> But it didn't work.

Can any one help me plz..

Regards, Kaleem

[BehnamAzg]

Hello, did you find any solutions? I'm having the same problem.

[zoltanszogyenyi]

Hey @kuhashmi1974,

Please get the instance of the carousel after the window has loaded:

https://flowbite.com/docs/getting-started/javascript/#instance-manager

Also, add the pause() method within JS after you have the instance, not before.

Cheers, Zoltan