javascript - 可以使用 bxslider getCurrentSlide 方法将类分配给事件幻灯片吗？

Question

我只使用带字幕的 bxslider。使用 CSS，我将标题堆叠在一起。我现在要做的是为事件标题(或“幻灯片”)分配一个类，这样我就可以更改它的背景颜色。

这可以使用 bxslider 回调函数之一来完成吗(它们都列在 http://bxslider.com/options 中)？我想我可以使用 getCurrentSlide 来完成我需要的，但我不确定如何去做。

这是 slider 的 HTML 片段。

<div class="bx-wrapper">
 <div class="bx-viewport">
  <ul class="bxslider">
   <li>
    <div class="imageContainer">
      <a href="/">
       <img src="">
      </a>
    </div>
    <div class="captionContainer">
     <p class="captionTitle">Some text</p>
     <p class="captionBlurb">Some more text</p>
    </div>
   </li>
   <li>
    <div class="imageContainer">
      <a href="/">
       <img src="">
      </a>
    </div>
    <div class="captionContainer">
     <p class="captionTitle">Some text</p>
     <p class="captionBlurb">Some more text</p>
    </div>
   </li>
   <li>
    <div class="imageContainer">
      <a href="/">
       <img src="">
      </a>
    </div>
    <div class="captionContainer">
     <p class="captionTitle">Some text</p>
     <p class="captionBlurb">Some more text</p>
    </div>
   </li>
  <ul>
 </div>
</div> 

我知道我需要从...开始

slider = $('.bxslider').bxSlider();
var current = slider.getCurrentSlide();

Answer 1

我知道这是旧的，但我遇到了同样的问题。这是我解决它的方法。

 slider = $('.bxslider').bxSlider({
  minSlides: 3,
  maxSlides: 3,
  slideWidth: 850,
  moveSlides: 1,
  onSliderLoad: function() {
    $(".bxslider li:not([class='bx-clone'])").eq(0).addClass('current');
  },
  onSlideBefore: function() {
    $(".bxslider li").removeClass('current');
    current = slider.getCurrentSlide();
    $(".bxslider li:not([class='bx-clone'])").eq(current).addClass('current');
  }
});     

在我的例子中，我有一个宽度为三个图像的 slider 。中间的一个在屏幕中央，两边的两个都离开屏幕。我想为中间的“当前”幻灯片上课。这就是我的方法。

onSliderLoad(); 中的代码最初将类添加到第一个元素。

我希望它将“当前”类添加到下一项，然后再使其居中(就在过渡开始之前)，因此这两行代码位于 onSliderBefore(); 函数中:

current = slider.getCurrentSlide();
$(".bxslider li:not([class='bx-clone'])").eq(current).addClass('current');

否则，您可以将这两行移动到 onSliderAfter(); 函数，“当前”类将在幻灯片转换后添加。