Question

我有一个带bx-pager的bxslider滑块设置。

如果我将鼠标悬停在寻呼机上，我会找不到选项，它会自动转到特定幻灯片吗？

例如，如果我将鼠标悬停在“幻灯片2”寻呼机上，则会转到幻灯片2.

点击活动正常，现在我想悬停工作。

               <div id="bx-pager" class="slider-pager-wrap row clearfix">

                    <div class="pager-container col-xs-4">
                        <a class="pager-first" data-slide-index="0" href="">
                            <p>Slide 1</p>
                        </a>
                    </div>

                    <div class="pager-container col-xs-4">
                        <a class="pager-second" data-slide-index="1" href="">
                            <p>Slide 2</p>
                        </a>
                    </div>
                  </div>

Answer 1

您需要将悬停事件与自定义bx-pager绑定，并使用bxslider的公共函数移动到相应的幻灯片并获得所需的效果。

Solution : jsfiddle

  $("#bx-pager li").hover(function(){
     //get the slide number associated with the pager
     var newSlideNo = $($(this).find("a")[0]).attr('data-slide-index');
     //verify the hovered slide number is not the same as currently displayed
     if(newSlideNo != slider.getCurrentSlide()){
        //slide to the new slide number
        slider.goToSlide(newSlideNo);
     }
  });

bxslider滑块 - 将鼠标悬停在寻呼机上

1 个答案: