Javascript自动播放，但悬停时暂停

Question

我是JavaScript&我创建了一个Slider。现在我想自动播放它并在悬停时暂停它(我使用的是WP和Elementor(。你能帮我吗？

<script>
( function() {
var the_timer = setInterval( function() {
if( typeof Swiper && typeof jQuery ) {
runTheCode();
clearInterval( the_timer );
}
}, 100 );
} )();
function runTheCode() {
// add 'swiper-container' class to .elementor-container
jQuery( '.custom-swiper > .elementor-container' ).addClass( 'swiper-container' );
// add 'swiper-wrapper' class to .elementor-row
jQuery( '.custom-swiper .swiper-container > .elementor-row' ).addClass( 'swiper-wrapper' );
// add 'swiper-slide' class to each column
jQuery( '.custom-swiper .swiper-wrapper > div' ).addClass( 'swiper-slide' );
// previous & next 
jQuery( '.custom-swiper .swiper-container' ).append( '<div class="swiper-button-next"></div>' ).append( '<div class="swiper-button-prev"></div>' );
// pagination
jQuery( '.custom-swiper .swiper-container' ).append( '<div class="swiper-pagination"></div>' );

var swiper = new Swiper('.custom-swiper > .elementor-container', {


loop: true, 
parallax: true,
speed: 500, 
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
/*
pagination: {
el: '.custom-swiper .swiper-pagination', 
type: 'bullets', 
clickable: true, 
},
*/
});
};
</script>

我的CSS(在Elementor容器中(：我已经尝试了一些东西，但似乎我无法理解。

.custom-swiper .elementor-container .elementor-row {
/flex-wrap: wrap;
}
.custom-swiper > .elementor-container > .elementor-row > .elementor-element.elementor-column {
width: 100%;
height: 150vh;

Answer 1

尝试将此属性添加到Swiper构造函数：

autoplay: {
delay: 2500,
disableOnInteraction: false,
}

您可以将onmouseover和onmouseout事件添加到您的滑动器元素中，就像这样(自己做一点实验(：

HTML

<div id="your-swiper-element" onmouseover="stopSwiper()" onmouseout="startSwiper()">

JS-

function startSwiper(){
swiper.autoplay.start();
}
function stopSwiper(){
swiper.autoplay.stop();
}