-1

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

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

这是滑块的 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();
4

2 回答 2

2

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

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

就我而言，我的滑块有三个宽的图像。中间的一个在屏幕中央，两边的两个离开屏幕。我想为中间的“当前”幻灯片开设一堂课。所以这就是我的方法。

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

我希望它在使其居中之前（就在过渡开始之前）将“当前”类添加到下一个项目，所以这两行在onSliderBefore();函数中：

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

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

于 2014-03-20T02:49:21.360 回答
0

您是否真的尝试过包含的 JavaScript 片段？

它应该像分配类名一样简单：

current.addClass('yourClassName);

也许我误解了这个问题？

于 2013-05-24T14:36:40.483 回答