bxslider stop on mouse hover custom pagination

Question

I have a bxSlider on my webpage. I'm trying to stop slider when mouse hover my custom paginator. Here is my html:

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

And here is my js;

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

Here is what i've tried so far:

$(document).on('hover','#slider-paginate',function() {
     slider.stopAuto();
     slider.startAuto();
});

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

How can i stop bxslider when mouse is hover on paginator elements?

Answer 1

I found answer myself;

i used 2 events;

First one for hover and other for mouseleave

Solution:

$('#slider-paginate').hover(function(){
     slider.stopAuto();     
});
$('#slider-paginate').mouseleave(function(){
     slider.startAuto();        
});