0

我在我的 wordpress 主题中使用 bxslider，一切似乎都运行良好，但我想做的只是将一些 css 应用于当前幻灯片。

我的页面上有多个滑块（wordpress 循环中的每个帖子都会拉一个滑块并将其放在摘录之上。我想要实现的是任何滑块中的当前图像的完全不透明度为 1，其中非当前图像的不透明度为 0.7

目前我已经在 bxslider 查询中使用一些 css 和以下内容实现了这一点：

    $(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); 
  }
    });
})

但这仅适用于循环中的第一个滑块，从外观上看，第二个似乎并没有通过添加类来实现？

可以在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 回答