splide js pauseOn Hover 选项无效

Question

我正在使用 splide js 创建滑动轮播，但选项 pauseOnHover 不起作用。因为如果你将鼠标悬停在滑块上，即使我已经将选项设置为 false，它也会停止滑动 pauseOnHover: false,.

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

splide.mount(window.splide.Extensions);

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

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

Answer 1

只需将您的 pauseOnHover 放入 autoScroll: {} 即可获得您想要的结果：

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

splide.mount(window.splide.Extensions);

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

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

希望对您有所帮助。

splide js pauseOn Hover 选项无效

splide js pauseOn Hover option don't have effect

javascript

splidejs