title: bxslider pager active state does not change after clicking another pager
body: <p>I am using <a href="http://bxslider.com/" rel="nofollow noreferrer">jQuery bsSlider</a> for my slider. The slideshow starts automatically after the page load. The problem is, after starting slideshow, if I click on a pager/dot, that pager/dot remain active for sometime after coming of next slider or previous slider too! </p>
  
  <p>For example, Imagine, there are three sliders. At first, <strong>1st slider</strong> is visible, so <strong>1st dot</strong> is active, if I click <strong>2nd dot</strong>, <strong>2nd slider</strong> will come and <strong>2nd dot</strong> will become active. But, from there, when <strong>3rd slide</strong> are coming automatically, both of <strong><em>2nd and 3rd dot</em></strong> remaining active! I hope, you can imagine the issue by seeing the screenshot:</p>
  
  <p><img src="https://i.imgur.com/A18IxJO.png" alt="bxSlider dot active issue"></p>
  
  <p>js code:</p>
  
  <pre><code>$('.bxslider').bxSlider();
  </code></pre>
  
  <p>How to fix it? </p>
  
  <p><a href="https://jsfiddle.net/learner73/ku39cpdx/4/" rel="nofollow noreferrer">Fiddle Work</a></p>