0

wordpress テーマで bxslider を使用していますが、すべて正常に動作しているように見えますが、現在のスライドのみに css を適用したいと考えています。

私は自分のページに複数のスライダーを持っています (wordpress ループの各投稿はスライダーを引き出し、抜粋の上に配置します。私が達成したいのは、任意のスライダーの現在の画像が 1 の完全な不透明度を持つことです。現在の画像の不透明度は 0.7 です

現在、いくつかのcssとbxsliderクエリで以下を使用してこれを達成しました:

    $(document).ready(function(){
    $('.bxslider').bxSlider({
            onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
    $('img.attachment-thumbnail-size').removeClass('active');
    $('img.attachment-thumbnail-size').eq(currentSlideHtmlObject+1).addClass('active')
    var current = $('img.attachment-thumbnail-size').attr('id');
    $('#team-member').load('load_member.php?id='+current); 
  }
    });
})

しかし、これはループの最初のスライダーでのみ機能します.2番目のスライダーは、物事の見た目によるクラスの追加を実行していないようです?

進行中のビルドはhttp://google-boost.co.ukで見ることができます

ありがとう！

4

1 に答える 1

0

これは、それがどのように機能する必要があるかの単なるアイデアです（テストされていません）

ただし、アイデアとしては、onSliderLoad (これは最初のスライド用) と onSlideBefore (これは次のスライドごとに機能するはずです) に個別に必要です。関数パラメーターを参照してください。bxSlider v4.1.1 を使用しているため、現在のバージョンに更新する必要があります。

$(document).ready(function(){
  $('.bxslider').bxSlider({
    onSliderLoad: function($slideElement, oldIndex, newIndex){ 
      var cur = $('ul.bxslider').find('li:eq('+($slideElement+1)+')');
      var current = cur.find('img.attachment-thumbnail-size');
      current.addClass('active');
      $('#team-member').load('load_member.php?id='+current.attr('id')); 
    },
    onSlideBefore: function($slideElement, oldIndex, newIndex){  
      $('img.attachment-thumbnail-size').removeClass('active');
      var cur = $('ul.bxslider').find('li:eq('+($slideElement+1)+')');
      var current = cur.find('img.attachment-thumbnail-size');
      current.addClass('active');
      $('#team-member').load('load_member.php?id='+current.attr('id')); 
    }
  });
})
于 2013-12-17T10:42:07.167 に答える