jquery - 如何使用 bxslider 在当前幻灯片中应用一个类？

Question

我需要一点帮助。我正在尝试为我的 bxslider 横幅使用 Bootstrap 分页，我成功地将它们组合在一起。现在我需要的是在当前页码中应用一个“事件”类。我正在尝试使用“onSlideAfter”选项，但我不知道如何获取当前页面。

这是我的分页代码:

<div class="pull-right">
    <div id="bx-pager">

        <nav>
          <ul class="pagination">
            <li><a href="#" id="slider-prev"><span class="sr-only">Previous</span></a></li>
            <li><a data-slide-index="0" href="">1</a></li>
            <li><a data-slide-index="1" href="">2</a></li>
            <li><a data-slide-index="2" href="">3</a></li>
            <li><a data-slide-index="3" href="">4</a></li>
            <li><a href="#" id="slider-next"><span class="sr-only">Next</span></a></li>
          </ul>
        </nav>
    </div>
</div>
<div class="clearfix"></div>

这是我的js:

$('.bxslider').bxSlider({
    auto: false,
    autoControls: false,
    captions: false,
    responsive: true,
    useCSS: false,
    speed: 2000,
    controls: true,
    pager: true,
    mode: 'fade',
    slideMargin: 10,
    pause: 10000,
    easing: 'ease-in',
    nextSelector: '#slider-next',
    prevSelector: '#slider-prev',
    pagerCustom: '#bx-pager',
    onSlideAfter: function() {
        alert('yehey new slide');
        //dont know how to apply a class to the current page number
    }
});

在我的 CSS 中我想添加一个这样的类

.page_active { color: maroon; }

我该怎么做？

Answer 1

onSlideAfer回调有 3 个参数 function($slideElement, oldIndex, newIndex)，你可以使用 newIndex 来确定页码和 addClass 到 li.

尝试，(未测试，添加一个 fiddle 以便我们尝试)

$('ul.pagination li a[data-slide-index='+ newIndex +']').addClass('page_active');

请看下面的演示，效果很好，

$('.bxslider').bxSlider({
  auto: false,
  autoControls: false,
  captions: false,
  responsive: true,
  useCSS: false,
  speed: 2000,
  controls: true,
  pager: true,
  mode: 'fade',
  slideMargin: 10,
  pause: 10000,
  easing: 'ease-in',
  nextSelector: '#slider-next',
  prevSelector: '#slider-prev',
  pagerCustom: '#bx-pager',
  onSlideAfter: function($slideElement, oldIndex, newIndex) {
    $('ul.pagination li a').removeClass('page_active').filter('[data-slide-index='+ newIndex +']').addClass('page_active');
  }
});

.page_active {
  color: maroon;
  border: 1px solid maroon;
  padding: 2px;
}

.pagination li { display: inline-block; margin: 2px; list-style: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<ul class="bxslider">
  <li>
    <img src="http://bxslider.com/images/730_200/hill_trees.jpg" style="width: 40%; height: 40%;" />
  </li>
  <li>
    <img src="http://bxslider.com/images/730_200/me_trees.jpg" style="width: 40%; height: 40%;"  />
  </li>
  <li>
    <img src="http://bxslider.com/images/730_200/houses.jpg" style="width: 40%; height: 40%;"  />
  </li>
</ul>
<div id="bx-pager">

  <nav>
    <ul class="pagination">
      <li><a href="#" id="slider-prev"><span class="sr-only"></span></a>
      </li>
      <li><a data-slide-index="0" href="">1</a>
      </li>
      <li><a data-slide-index="1" href="">2</a>
      </li>
      <li><a data-slide-index="2" href="">3</a>
      </li>
      <li><a href="#" id="slider-next"><span class="sr-only"></span></a>
      </li>
    </ul>
  </nav>
</div>