javascript - bxslider 在鼠标悬停时停止自定义分页

Question

我的网页上有一个 bxSlider。 当鼠标悬停在自定义分页器上时，我试图停止 slider 。 这是我的 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？

Answer 1

我自己找到了答案；

我使用了 2 个事件；

第一个用于hover，另一个用于mouseleave

解决方案:

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