bxslider stop on mouse hover custom pagination

Question

У меня есть bxSlider на моей странице. Я пытаюсь остановить слайдер, когда наведите курсор на мой пользовательский указатель. Вот мой 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> 

А вот мой JS;

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

Вот что я пытался до сих пор:

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

К сожалению, это не сработало. Что мне не хватает? Что не так с моим кодом javascript?

Как я могу остановить bxslider, когда мышь наводится на элементы paginator?

Answer 1

Я нашел ответ самостоятельно;

Я использовал 2 события;

Первый один для hover и другие для mouseleave

Решение:

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