0

我正在尝试使用 bxSlider 在响应式滑块中调整三个轮播中的中心幻灯片的不透明度（以模拟此站点http://www.tyinarchitects.com/），但无法获得正确的语法。

当我使用 $slideElement.addClass('active-slide'); 效果发生了，只是在错误的幻灯片上，所以当我的基本想法有效时，我需要使用 oldIndex 和 NewIndex 而不是 $slideElement 来引用幻灯片。

我尝试了各种排列：-

$slider.children.eq(oldIndex).removeClass('active-slide');
$slider.$children.eq(oldIndex).removeClass('active-slide');
$('.slider2').children.eq(newIndex).addClass('active-slide');

而且它们都只是阻塞了工作，所以我的 JS 语法显然不正确。谁能可怜我？

完整的工作代码是

$(document).ready(function(){
  $('.slider2').bxSlider({
    slideWidth: 300,
    minSlides: 3,
    maxSlides: 3,
    moveSlides: 1,
    slideMargin: 0,
    pager: false,
    auto: true,
    onSlideBefore: function($slideElement, oldIndex, newIndex){
    $slideElement.addClass('active-slide');
            },
    onSlideAfter: function($slideElement, oldIndex, newIndex){
    $slideElement.removeClass('active-slide');
            }
  });
4

1 回答 1

1

假设您的 HTML 如下所示：

<div id="container">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
</div>

然后你可以尝试以下方法：

onSlideBefore: function($slideElement, oldIndex, newIndex) {
    $('#container>div').eq(newIndex).addClass('active-slide'));
}
于 2014-12-03T11:06:58.260 回答