Start Autoplay for Slider on Hover

How To
1

There is an option to stop the autoplay for the slider on hover, but I would like to start the autoplay when hovering.

This is what I want to achieve:
https://easydoesit.de/de/work

I have no experience with JavaScript, but I tried it with ChatGPT. So I added a code element with this code, but it’s not working. Can anyone help me? :blush:

<script>
const nestableSlider = new Splide('.splide', {
    // Your other custom options...
    // ...
    "autoplay": false, // Set autoplay to false initially in the options
});

nestableSlider.mount();

const sliderElement = document.querySelector('#your-nestable-slider-id');

sliderElement.addEventListener('mouseover', function () {
    nestableSlider.options.autoplay = true; // Enable autoplay
    nestableSlider.refresh(); // Refresh the slider to apply the new options
});

sliderElement.addEventListener('mouseout', function () {
    nestableSlider.options.autoplay = false; // Disable autoplay when the mouse leaves
    nestableSlider.refresh(); // Refresh the slider to apply the new options
});

</script>
1 Like