bxslider stop on mouse hover custom pagination
<p>I have a <code>bxSlider</code> on my webpage. 
I'm trying to stop slider when mouse hover my custom paginator.
<strong>Here is my html:</strong></p>

<pre><code>&lt;ul id="slider"&gt;
    &lt;!-- Slide --&gt;
    &lt;li class="slider-element"&gt;
        &lt;a href="'.$sliderLink.'"&gt;
        &lt;img src="'.$sliderImage.'"&gt;
        &lt;div class="slider-caption-wrapp"&gt;
            &lt;div class="slider-caption"&gt;'.$sliderTitle.'&lt;/div&gt;
        &lt;/div&gt;
        &lt;/a&gt;
    &lt;/li&gt;
    &lt;!-- Slide --&gt;
    &lt;!-- Slide --&gt;
    &lt;li class="slider-element"&gt;
        &lt;a href="'.$sliderLink.'"&gt;
        &lt;img src="'.$sliderImage.'"&gt;
        &lt;div class="slider-caption-wrapp"&gt;
            &lt;div class="slider-caption"&gt;'.$sliderTitle.'&lt;/div&gt;
        &lt;/div&gt;
        &lt;/a&gt;
    &lt;/li&gt;
    &lt;!-- Slide --&gt;
&lt;/ul&gt;
&lt;!-- Paginator --&gt;
&lt;ul id="slider-paginate" class="col-lg-9 col-md-9 col-sm-12 col-xs-12"&gt;
    &lt;li&gt;&lt;a data-slide-index="'.$slideIndex++.'" href="'.$sliderLink.'"&gt;&lt;span&gt;'.$slideIndexShow++.'&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a data-slide-index="'.$slideIndex++.'" href="'.$sliderLink.'"&gt;&lt;span&gt;'.$slideIndexShow++.'&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>And here is my js;</p>

<pre><code>// Main Slider
var slider = jQuery('#slider').bxSlider({
    auto: true,
    speed: 500,
    delay: 5000,
    autoHover: true,
    stopAuto: false,
    pagerCustom: '#slider-paginate'
});
</code></pre>

<p>Here is what i've tried so far:</p>

<pre><code>$(document).on('hover','#slider-paginate',function() {
     slider.stopAuto();
     slider.startAuto();
});
</code></pre>

<p>Unfortunately it didn't work. What am i missing? What is wrong with my javascript code?</p>

<p><strong>How can i stop bxslider when mouse is hover on paginator elements?</strong></p>