0

bxSlider を使用してレスポンシブ スライダーで 3 つのカルーセル (このサイトhttp://www.tyinarchitects.com/をエミュレートするため) で中央のスライドの不透明度を調整しようとしていますが、正しい構文を取得できません。

$slideElement.addClass('active-slide'); を使用する場合 この効果は間違ったスライドでのみ発生するため、私の基本的なアイデアは機能しますが、$slideElement ではなく oldIndex と NewIndex を使用してスライドを参照する必要があります。

私はさまざまな順列を試しました：-

$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 に答える