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 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>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 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>Hope this helped.