当滑块开始更改项目时，添加分页活动类

add pager active class when slider starts changing items

本文关键字：添加分页活动项目开始更新时间：2023-09-26

我找到了这把小提琴

这是非常类似于我的任务只是有一个问题，你如何看到现在第一个项目有活动类，但当滑动条自动启动，活动类不添加到下一个或上一个项目，只有当你点击每个左边的项目在这种情况下，它接收活动类。所以我想在滑块自动旋转时为每个当前项目添加活动类。

$(function() {
    var slider = $('#banner-slider').bxSlider({
        controls: true,
        mode: 'vertical',
        auto: true,
        pager:true
    });
    $('.banner-pager a').click(function() {
        var thumbIndex = $('..banner-pager a').index(this);
        slider.goToSlide(thumbIndex);
        $('.banner-pager a').removeClass('pager-active');
        $(this).addClass('pager-active');
        return false;
    });
    $('.banner-pager a:first').addClass('pager-active');
});

如果您可以升级到较新版本的bxslider，那么您可以使用

这样的回调

$(function() {
  $(function() {
    var $as = $('.banner-pager a');
    // assign the slider to a variable
    var slider = $('#banner-slider').bxSlider({
      controls: true,
      mode: 'vertical',
      auto: true,
      pager: true,
      onSlideAfter: function($el, pidx, idx) {
        $as.eq(pidx).removeClass('pager-active');
        $as.eq(idx).addClass('pager-active');
      }
    });
    $as.click(function() {
      var thumbIndex = $as.index(this);
      slider.goToSlide(thumbIndex);
      return false;
    });
    // assign "pager-active" class to the first thumb
    $('.banner-pager a:first').addClass('pager-active');
  });
});

    #banner {
      height: 294px;
      width: 100%;
      position: relative;
      background: #e5e5e5;
      font-weight: bold;
      text-transform: uppercase;
      margin-bottom: 10px;
      overflow: hidden;
    }
    .banner-nav {
      max-width: 260px;
      width: auto;
      height: 294px;
      float: left;
      position: relative;
      background: #cccccc;
      position: absolute;
    }
    .banner-pager a {
      width: 220px;
      display: block;
      float: left;
      height: 18px;
      padding: 12px 20px;
      color: #111;
      text-decoration: none;
    }
    .banner-pager a.pager-active,
    .banner-pager a:hover {
      background: #e5e5e5;
      text-decoration: underline;
    }
    .banner-wrap {
      float: left;
      height: 294px;
      padding-left: 260px;
    }
    .banner-slide {
      height: 294px;
      width: 720px;
    }

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.js"></script>
<div id="banner">
  <div class="banner-nav">
    <div class="banner-pager">
      <a href="">Dubery Wotsit</a>
      <a href="">Laterz on a'menjey</a>
      <a href="">Joben</a>
      <a href="">Tukka Tukka</a>
      <a href="">Horse Hair Duvet</a>
      <a href="">FML</a>
      <a href="">Balls Deep</a>
    </div>
  </div>
  <div class="banner-wrap">
    <ul id="banner-slider">
      <li style="background: #FF0000;">
        <div class="banner-slide">Dubery Wotsit</div>
      </li>
      <li style="background: #FF8000;">
        <div class="banner-slide">Laterz on a'menjey</div>
      </li>
      <li style="background: #FFFF00;">
        <div class="banner-slide">Joben</div>
      </li>
      <li style="background: #80FF00;">
        <div class="banner-slide">Tukka Tukka</div>
      </li>
      <li style="background: #00FF00;">
        <div class="banner-slide">Horse Hair Duvet</div>
      </li>
      <li style="background: #00FF80;">
        <div class="banner-slide">FML</div>
      </li>
      <li style="background: #00FFFF;">
        <div class="banner-slide">Balls Deep</div>
      </li>
    </ul>
  </div>
</div>