javascript - 如何在 bxslider 中获取一组事件幻灯片？

Question

刚刚将 bxslider 集成到我的网站中，我有一个要求，我需要 slider 中的当前事件/可见图像集，请参阅 bxslide 的示例 HERE .

jQuery 初始化代码如下:

$('.bxslider').bxSlider({
   mode: 'vertical',
  infiniteLoop: true,
  pager: false,
  minSlides:3,
  slideMargin:10
});

现在我尝试了公共(public) API 中的所有方法，最接近我要求的是 onSlideAfter ，所以我尝试像这样使用它:

var bxslider = $('.bx-slider').bxSlider({
          mode: 'vertical',
          minSlides: 3,
          slideWidth:304,
          onSlideAfter: function(elem , old , newi){
                var idx = elem.index(),
                src = $('.bx-slider li').eq(idx).find('img').attr('src');
                console.log(elem.index());
                $('.active-project-img img').attr('src' , src);
          }
    });

但是 elem 既不是事件元素集，也不是我实际假设的第一个事件元素。

另一个可以与幻灯片插件一起使用的解决方案是，获取所有可见元素，但问题是 bxsider 一开始就没有隐藏任何元素。

谁能帮我弄到事件/可见元素集吗？

编辑: Bxslider API

谢谢。

Answer 1

正如您提到的，由于 bxslider 通过固定视点高度和使用变换来玩花样，因此没有简单的方法来获取所有事件幻灯片。

在测试期间，我发现 bxslider 以某种方式将 .bx-clone 复制到列表中。为了避免计算错误，我用 .not('.bx-clone') 来排除它们。

吼叫应该能满足你的需要。

var minslide = 3; // for later usage
var slider = $('.bxslider').bxSlider({
  mode: 'vertical',
  infiniteLoop: true,
  pager: false,
  minSlides:3,
  slideMargin:10,
  onSlideAfter: function(elem, old, newi){
    // calculate offset
    si = minslide*newi;
    ei = minslide*(newi+1);
    active_slides = $('.bxslider li').not('.bx-clone').slice(si, ei);  // key point
    console.log(active_slides);       
  }
});

虽然计算部分不完整(可能不是均分)，但您可以修复它。