Question

我需要一点帮助。我正在尝试使用Bootstrap分页为我的bxslider横幅，我成功地设法将它们组合起来。现在我需要的是申请一个活跃的课程。在当前页码中。我正在尝试使用选项＆＃39; onSlideAfter＆＃39;但我不知道如何获取当前页面。

这是我的分页代码：

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

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

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

见下面的演示，它确实运作良好，

＆＃13;

$('.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');
  }
});

＆＃13;

.page_active {
  color: maroon;
  border: 1px solid maroon;
  padding: 2px;
}

.pagination li { display: inline-block; margin: 2px; list-style: none; }

＆＃13;

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

＆＃13;

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

1 个答案: