bxSlider onSlideBefore newbieQ

Question

我想在使用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'); 
      } 
    }); 

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