如何在bxslider中获取一组活动幻灯片

How to get set of active slides in bxslider?

本文关键字：一组 活动 幻灯片 bxslider 获取      更新时间：2023-09-26

我刚刚将bxslider集成到我的网站中，我有一个要求，我需要滑块中的当前活动/可见图像集，请参阅bxslideHERE的示例。

jQuery初始化代码如下：

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

现在我尝试了公共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

谢谢。

正如您所提到的，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);       
  }
});

计算部分虽然不完整（可能不是均匀划分），但你可以修复它。

相关文章：