splide js pauseOn Hover option don't have effect-CodePudding

I'm using splide js to create a sliding carousel, but the option pauseOnHover is not working. Because if you hover over the slider, it will stop sliding even I already set the option to be false pauseOnHover: false,.

const splide = new Splide('.splide', {
   type: 'loop',
   pauseOnHover: false,
   autoScroll: {
      speed: 2,
   }
});

splide.mount(window.splide.Extensions);

<section  aria-label="Splide Basic HTML Example">
  <div >
        <ul >
            <li >Slide 01</li>
            <li >Slide 02</li>
            <li >Slide 03</li>
        </ul>
  </div>
</section>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css">
<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide-extension-auto-scroll.min.js"></script>

CodePudding user response：

Simply put your pauseOnHover inside autoScroll: {} to get what you want like so:

const splide = new Splide('.splide', {
   type: 'loop',
   autoScroll: {
      speed: 2,
      pauseOnHover: false,
   }
});

splide.mount(window.splide.Extensions);

<section  aria-label="Splide Basic HTML Example">
  <div >
        <ul >
            <li >Slide 01</li>
            <li >Slide 02</li>
            <li >Slide 03</li>
        </ul>
  </div>
</section>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css">
<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide-extension-auto-scroll.min.js"></script>

Hope this helped.