How to Pause and Resume bxSlider

On my web page bxSlider starts when the page loads. I would like to pause it at certain times, such as when the user clicks "Contact Us". Then I would like to resume playing bxSlider when the "Contact Us" form closes.

I wasn't sure how to programmatically pause and resume bxSlider. So I specified "autoHover: true" in the code below and used the trigger() method to emulate a mouseover or mouseout event, causing bxSlider to pause or resume. But I would prefer not to specify "autoHover: true", since the user might inadvertently hover over bxSlider and cause it to pause.

I would be grateful if someone can tell me how to pause and resume 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>

Solution

Try to use Public Methods stopAuto and startAuto for this

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

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

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