带有自定义寻呼机的 bx 滑块在悬停时在幻灯片之间移动时出现问题

Question

因此，我正在使用 bx slider plugin 进行自定义幻灯片放映。我制作了一个自定义寻呼机，因为要求幻灯片位于将充当寻呼机的几个内容块的中心，并且我需要将这些项目放在幻灯片的不同侧面。幻灯片将自动旋转，直到用户将鼠标悬停在内容块上，该内容块将移动并冻结与该项目相关的幻灯片。

原型： https://codepen.io/Denzy/pen/OqBXxq

我几乎让它工作。在我上面的例子中，它工作得很短暂，但如果我在项目之间快速移动鼠标，整个事情就会冻结。如果我将寻呼机的 'on' 事件更改为 'click' 一切都按预期工作，但我需要它是您将鼠标悬停在一个项目上，而不是单击。这使我相信问题与在滑块从第一个项目完成移动之前将鼠标悬停在另一个项目上有关，并且事情被破坏了。

我当前的鼠标事件是这样的：

$('#slide-container .pager-list a').on('mouseenter', function() {
    slider.goToSlide(this.getAttribute('data-slide-index'));
    slider.stopAuto();
});

$('#slide-container .pager-list a').on('mouseleave', function() {
    slider.startAuto();
});

*编辑：其余 jQuery：

var slider = $('.bxslider').bxSlider({
    pagerCustom: '#slide-container',
    slideWidth: 400,
    controls: false,
    auto: true,
    autoHover: true,
    pause: 2000
});

slider.bxSlider();

如果这是问题所在，在第一个滑动动作完成之前，我该怎么做才能防止幻灯片移动？

Answer 1

相关变更

删除 .bxSlider() 的额外实例化，你只需要 ul.bxslider
删除 pagerCustom 选项，因为它期望 link 被点击（哪个 OP 要求明确排除该行为）。
添加pager: false。我们将依靠 jQuery 事件委托来调用 bxSlider 方法。

缩小鼠标事件的选择器范围：

   $('.pager').on(MOUSEEVENT, 'a', function() {...

将 mouseenter 事件更改为 mouseover 事件。 mouseenter 仅在鼠标越过元素边界时涵盖，而 mouseover 涵盖边界跨越和指针在所述元素内的持续时间。

变化：

  ...(this.getAttribute('data-slide-index')) // Result is a String ex. "1"<br>

至：

  ...($(this).data('slide-index')) // Result is a Number ex. 1

可选更改

每个 link href 属性值都设置为 #/ 以防止 <a> 跳跃行为.
文本的每个 <img> URL 参数已更改为此模式：
```
 &text=Slide%20N
```
%20 = 一个 space 和 N = 一个数字 1 到 6

演示

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet">
  <style>
    ul {
      list-style: none;
    }
    
    li {
      padding: 20px 0;
    }
    
    .active {
      color: red;
    }
    
    a {
      color: #fff;
      padding: 10px;
      background-color: #64758a;
    }
    
    a:hover {
      color: red;
    }
  </style>
</head>

<body>
  <main class="slide-container">
    <ul class="pager">
      <li> <a data-slide-index="0" href="#/">Slide 1</a>
      </li>
      <li> <a data-slide-index="1" href="#/">Slide 2</a>
      </li>
      <li> <a data-slide-index="2" href="#/">Slide 3</a>
      </li>
    </ul>
    <ul class="bxslider">
      <li>
        <img src="http://placehold.it/800x250/5E7074/FFFFFF&text=Slide%201" />
      </li>
      <li>
        <img src="http://placehold.it/800x250/5E7074/FFFFFF&text=Slide%202" />
      </li>
      <li>
        <img src="http://placehold.it/800x250/5E7074/FFFFFF&text=Slide%203" />
      </li>
      <li>
        <img src="http://placehold.it/800x250/5E7074/FFFFFF&text=Slide%204" />
      </li>
      <li>
        <img src="http://placehold.it/800x250/5E7074/FFFFFF&text=Slide%205" />
      </li>
      <li>
        <img src="http://placehold.it/800x250/5E7074/FFFFFF&text=Slide%206" />
      </li>
    </ul>
    <ul class="pager">
      <li> <a data-slide-index="3" href="#/">Slide 4</a>
      </li>
      <li> <a data-slide-index="4" href="#/">Slide 5</a>
      </li>
      <li> <a data-slide-index="5" href="#/">Slide 6</a>
      </li>
    </ul>
  </main>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
  <script>
    var slider = $('.bxslider').bxSlider({
      slideWidth: 400,
      controls: false,
      auto: true, //should be set to true
      autoHover: true,
      pause: 2000,
      pager: false
    });

    $('.pager').on('mouseover', 'a', function() {
      slider.goToSlide($(this).data('slide-index'));
      slider.stopAuto();
    });

    $('.pager').on('mouseleave', 'a', function() {
      slider.startAuto();
    });
  </script>
</body>

</html>

带有自定义寻呼机的 bx 滑块在悬停时在幻灯片之间移动时出现问题

bx slider with custom pager having issues moving between slides on hover

javascript

jquery

bxslider

相关变更

可选更改

演示