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

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？

Answer 1

我自己找到了答案；

我使用了 2 个事件；

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

解决方案：

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

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

bxslider stop on mouse hover custom pagination

javascript

jquery

bxslider