Question

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

我的页面上有多个滑块（wordpress循环中的每个帖子都会拉出滑块并将其放在摘录上方。我想要实现的是任何滑块中的当前图像都具有1的完全不透明度，其中-as非当前图像的不透明度为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

看到

谢谢！

Answer 1

这只是一个想法，它必须如何工作（未经测试）

但是这个想法，你需要单独使用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')); 
    }
  });
})

bxSlider - 仅限当前幻灯片上的Animate / CSS？

1 个答案: