【问题标题】：jquery bxslider slider with custom pager - auto play not adding active class to pager?带有自定义寻呼机的jquery bxslider滑块-自动播放不向寻呼机添加活动类？
【发布时间】：2020-04-16 09:01:35
【问题描述】：

我创建了一个jsFiddle 来展示我的问题。 http://jsfiddle.net/motocomdigital/NXzcx/3/

概览

我刚开始开发一个网站，我想使用一个通用的 jQuery 插件来用于我网站上的所有滑块和代码，而不是多个 jQuery 插件。

我做了一些搜索，偶然发现了jQuery bxslider - 文档看起来不错，所以我决定先提供它。

我正在尝试创建一个与google shopping 页面上的滑块类似的滑块。我可以理解这个jQuery bxslider plugin 可能无法实现寻呼机之间的确切转换。

问题

请查看我的http://jsfiddle.net/motocomdigital/NXzcx/3/ 以供参考。

根据google shopping 页面示例，我设法让幻灯片自动播放，但似乎没有将.page-active 类添加到当前寻呼机？ ...当您选择寻呼机时，它不会继续自动播放？而且文档似乎没有解释这一点。

有什么想法可以实现这一点吗？

我在这里关注了这个演示...http://bxslider.com/examples/thumbnails-pager-method-1

代码

$(function() {

    // assign the slider to a variable
    var slider = $('#banner-slider').bxSlider({
        controls: false,
        mode: 'vertical',
        auto: true
    });

    // assign a click event to the external thumbnails
    $('.banner-pager a').click(function() {
        var thumbIndex = $('..banner-pager a').index(this);
        // call the "goToSlide" public function
        slider.goToSlide(thumbIndex);

        // remove all active classes
        $('.banner-pager a').removeClass('pager-active');
        // assisgn "pager-active" to clicked thumb
        $(this).addClass('pager-active');
        // very important! you must kill the links default behavior
        return false;
    });

    // assign "pager-active" class to the first thumb
    $('.banner-pager a:first').addClass('pager-active');

});

任何帮助都会很棒！或者，如果您可以推荐一个更通用的 jQuery 插件，那就太好了。谢谢

【问题讨论】：

标签： jquery

【解决方案1】：

使用新版本，问题将得到解决。我们可以使用：

pagerCustom: $('.banner-pager')

来自插件站点的示例页面是示例Thumbnail pager - method 1

here 就是你的榜样

【讨论】：

【解决方案2】：

看起来您在小提琴中使用的版本有点旧。 onSlideAfter 有一些问题：

http://jsfiddle.net/NXzcx/101/

但在同一个小提琴中，我使用startShow 方法在您手动选择幻灯片后重新开始放映。这是显示他们使用 onSlideAfter 的示例，我建议只使用他们在此页面上链接的相同版本：http://bxslider.com/examples/callback-api

【讨论】：

【解决方案3】：

有回调函数

onAfterSlide: function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject){  
    $('.banner-pager a.pager-active').removeClass('pager-active').next().addClass('pager-active');  
}

这应该可以解决自动切换类 pager-active 的问题。此外，每次单击后，您都必须再次开始幻灯片放映，以使用

解决自动播放问题

slider.reloadShow();

仅在点击处理程序内部。

【讨论】：

非常感谢@tea_totaler - 这似乎工作得很好，虽然它似乎只运行一个周期一次？看看我做了什么jsfiddle.net/motocomdigital/NXzcx/16 - 谢谢，乔希
当你点击一个寻呼机时，它似乎有点困惑。
我似乎无法让您的答案正常工作？你能帮我添加一个jsfiddle吗？这是我的尝试，但似乎无法正常工作。 jsfiddle.net/motocomdigital/NXzcx/16谢谢
当您单击时它会变得一团糟，因为您的背景颜色样式是内联的，并且不知何故 js fiddle 搞砸了它们。我正在解决另一个问题。
哦，是的，不用担心颜色/样式问题——这只是另一个问题。感谢您的帮助。

【解决方案4】：

问

"...但它似乎没有将 .page-active 类添加到当前寻呼机？"

一个

bxSlider 实际上有一个名为.active 的内置类，它跳转到寻呼机中的当前链接。在浏览器中打开 Devtools F12 并找到寻呼机的 HTML 源代码。每当您切换到另一张幻灯片时，您应该会看到 .active 类移动到寻呼机链接中的当前索引位置。 如果您没有看到它并且您有自定义寻呼机，请阅读 bxPager 部分这篇文章的底部

问

" ...当您选择寻呼机时，它不会继续自动播放？"

一个

Enhancement: Maintain auto display of slides after a manual selection #594

Fiddle

演示

$(function() {
  var slider = $('.banner-slider').bxSlider({
    controls: false,
    mode: 'vertical',
    auto: true,
    pause: 5000,
    autoHover: true,
    pagerCustom: '.banner-pager',
    wrapperClass: '.banner-wrap'
  });
});

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%
}

#banner-main {
  height: 100%;
  width: 100%;
  position: relative;
  background: #e5e5e5;
  font-weight: bold;
  font-variant: small-caps;
  overflow: hidden;
}

.banner-nav {
  max-width: 260px;
  width: auto;
  height: 100%;
  left: 0;
  background: #cccccc;
  position: absolute;
}

.banner-pager a {
  width: 220px;
  display: block;
  height: 15px;
  padding: 25px 12px 0;
}

.banner-pager a.active,
.banner-pager a:hover {
  background: #e5e5e5;
}

.banner-wrap {
  height: 100vh;
  padding-left: 260px;
}

.banner-slide {
  height: 100vh;
  width: 720px;
  padding: 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet" />

<main id="banner-main">
  <section class="banner-nav">
    <nav class="banner-pager">
      <a data-slide-index='0' href="#/">Dubery Wotsit</a>
      <a data-slide-index='1' href="#/">Laterz on a'menjey</a>
      <a data-slide-index='2' href="#/">Joben</a>
      <a data-slide-index='3' href="#/">Tukka Tukka</a>
      <a data-slide-index='4' href="#/">Horse Hair Duvet</a>
      <a data-slide-index='5' href="#/">FML</a>
      <a data-slide-index='6' href="#/">Balls Deep</a>
    </nav>
  </section>

  <section class="banner-wrap">
    <ul class="banner-slider">
      <li class="banner-slide" style="background: #FF0000;">
        <h3>Dubery Wotsit</h3>
      </li>
      <li class="banner-slide" style="background: #FF8000;">
        <h3>Laterz on a'menjey</h3>
      </li>
      <li class="banner-slide" style="background: #FFFF00;">
        <h3>Joben</h3>
      </li>
      <li class="banner-slide" style="background: #80FF00;">
        <h3>Tukka Tukka</h3>
      </li>
      <li class="banner-slide" style="background: #00FF00;">
        <h3>Horse Hair Duvet</h3>
      </li>
      <li class="banner-slide" style="background: #00FF80;">
        <h3>FML</h3>
      </li>
      <li class="banner-slide" style="background: #00FFFF;">
        <h3>Balls Deep</h3>
      </li>
    </ul>
  </section>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>

bxPager

将以下选项添加到bxSlider()：

var bx = $("ul.bx").bxSlider({
  pagerCustom: ".bxNav"
});

接下来创建 HTML 布局。常用的标签有<ul>、<li>，当然还有<div>。我更喜欢使用<nav> 和<a>。
```
 <nav class="bxNav">
   <a href="#/" class="active">1</a>
   <a href="#/">2</a> 
   <a href="#/">3</a>
</nav> 
```

现在每个寻呼机链接都需要一个data-* 属性：

 <nav class="bxNav">
   <a href="#/" class="active" data-slide-index="0">1</a>
   <a href="#/" data-slide-index="1">2</a> 
   <a href="#/" data-slide-index="2">3</a>
</nav>

最后，我们可以在 CSS 中添加 .active 类。

.active {
  background:rgba(0, 0, 0, 0.3);
  color: gold
}

【讨论】：