如何暂停和恢复 bxSlider

Question

在我的网页上，bxSlider 在页面加载时启动。我想暂停在特定时间，例如当用户单击 "Contact Us" 时。然后我想在 "Contact Us" 表单关闭时继续播放 bxSlider。

我不确定如何以编程方式暂停和恢复 bxSlider。所以我在下面的代码中指定了 "autoHover: true" 并使用 trigger() 方法来模拟 mouseover 或 mouseout 事件，导致 bxSlider 暂停或恢复。但我不想指定 "autoHover: true"，因为用户可能会无意中将鼠标悬停在 bxSlider 上并导致它暂停。

如果有人能告诉我如何暂停和恢复 bxSlider，我将不胜感激。

<html>
<head>
<script>
   $(window).load(function() {
         $('.bxslider').bxSlider( {
          auto: true,
          mode: 'fade',
          autoHover: true,
          pause: 1000
         });
    });

    function pausebx() { 
       $('.bxslider').trigger('mouseover'); 
    }
    function resumebx() { 
       $('.bxslider').trigger('mouseout'); 
    }

</script>
</head>
<body>
<div>
<button id="btnOpenContactForm" onclick="pausebx()">Open Contact Form</button><br>
<button id="btnCloseContactForm" onclick="resumebx()">Close Contact Form</button><br>
</div>

<div>
    <ul class="bxslider">
        <li><img src="http://www.example.com/images/S-1.gif"></li>
        <li><img src="http://www.example.com/images/S-2.gif"></li>
        <li><img src="http://www.example.com/images/S-3.gif"></li>
    </ul>
</div>
</body>
</html>

Answer 1

为此尝试使用 Public Methods stopAuto 和 startAuto

var slider=$('.bxslider').bxSlider({
      //your code here
});

// pause
$(document).on('click','#btnOpenContactForm',function(){         
     slider.stopAuto();
});

// play
$(document).on('click','#btnCloseContactForm',function(){         
     slider.startAuto();    
});

如何暂停和恢复 bxSlider

How to Pause and Resume bxSlider

jquery

bxslider