如何使用bxslider在当前幻灯片中应用类？

debugcn 发表于 Dev

耶利尔

我需要一点帮助。我正在尝试将Bootstrap分页用于bxslider横幅，并且成功地将它们组合在一起。现在，我需要在当前页码中应用“活动”类。我正在尝试使用选项'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; }

我怎样才能做到这一点？

Selvakumar Arumugam

该onSlideAfer回调有3个arguements function($slideElement, oldIndex, newIndex)，您可以使用newIndex来确定页码和addClass到li。

尝试一下（（未经测试，添加小提琴，以便我们可以尝试一下）

$('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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。