我在选项卡中的网站上测试BxSlider。 BxSlider位于第一个Tab-1中，在页面加载时可见并且工作正常。但是，一旦我单击Tab-2或Tab-3，然后回到BxSlider所在的Tab-1。 BxSlider卡住了，我在浏览器控制台中看不到任何错误，我必须刷新页面才能使滑块再次工作。 我的代码：
<div class="bxslider">
<div><img src="/assets/images/coffee1.jpg"></div>
<div><img src="/assets/images/coffee2.jpg"></div>
<div><img src="/assets/images/coffee3.jpg"></div>
<div><img src="/assets/images/coffee1.jpg"></div>
<div><img src="/assets/images/coffee2.jpg"></div>
<div><img src="/assets/images/coffee3.jpg"></div>
</div>
jQuery(document).ready(function($) {
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
stopAutoOnClick: true,
pager: true,
slideWidth: 600
});
});
答案 0 :(得分：0)
Page Visibility API使我们可以注册visibilitychange事件。一旦失去对目标元素或已注册元素的可见性，就会触发visibilitychange。提到的一种用例与OP完全相同。
"Stop movement of a slider carousel when the page has lost focus."
详细信息在演示中进行了评论。
/*
Store the instantiation of bxSlider object in a variable (var bx)
*/
var bx = $('.bxslider').bxSlider({
auto: true,
autoControls: true,
stopAutoOnClick: true,
pager: true,
slideWidth: 600
});
// Declare hidden property
var hidden = "hidden";
// Define the event handler
function windowBlur() {
// if hidden property is true...
if (document[hidden]) {
// Stop bxSlider
bx.stopAuto();
// Otherwise...
} else {
// Redraw and start bxSlider
bx.redrawSlider();
bx.startAuto();
}
}
// Register the document to the event
document.addEventListener('visibilitychange', windowBlur);.bx-wrapper {
margin: 0 auto;
}
img {
display: block;
margin: 0 auto;
width: 100%;
height: auto;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" />
<style></style>
</head>
<body>
<main class="bxslider">
<section>
<img src='https://i.ibb.co/tmQZgJb/68eb2df1a189f88bb0cbd47a3e00c112.png'>
</section>
<section><img src="https://i.ibb.co/ZHvWsKb/o1z7p.jpg"> </section>
<section><img src="https://i.ibb.co/5LPXSfn/Lenna-test-image.png"> </section>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<script></script>
</body>
</html>