Q

Question

我创建了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插件，那么很棒。感谢

Answer 1

有一个回调函数

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

这应该可以解决自动切换类寻呼机活动的问题。每次点击后，您还必须再次开始播放幻灯片以使用

解决自动播放问题

slider.reloadShow();

仅限点击处理程序。

Answer 2

看起来你在小提琴中使用的版本有点旧。 onSlideAfter：

存在一些问题

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

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

Answer 3

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

pagerCustom: $('.banner-pager')

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

和here就是你的例子

Answer 4

Q

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

A

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

<小时/>

Q

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

A

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

<小时/>

Fiddle

演示

＆＃13;

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

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

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>

最后，我们可以将.active类添加到CSS。

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

带自定义寻呼机的jquery bxslider滑块 - 自动播放不向寻呼机添加活动类？

4 个答案:

Q

A

Q

A

Fiddle

演示

bxPager