Как приостановить и возобновить bxSlider - PullRequest
Новая
       20

Как приостановить и возобновить bxSlider

0 голосов
/ 04 мая 2019

На моей веб-странице bxSlider запускается при загрузке страницы. Я хотел бы приостановить это в определенное время, например, когда пользователь нажимает «Связаться с нами». Затем я хотел бы возобновить игру на 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>

1 Ответ

1 голос
/ 04 мая 2019

Попробуйте использовать Публичные методы 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();    
});
...