Question

我的网页上有一个bxslider，其中包含以下选项

$('#carousel').bxSlider({
    slideWidth: 146,
    minSlides: 2,
    maxSlides: 6,
    speed:500,
    adaptiveHeight: true,    
    moveSlides:3,
    infiniteLoop : false,
    hideControlOnEnd : true,    
    slideMargin: 10
});

在这个滑块里面我有多个DOM元素，如下面的

<div class="itemClass_XX_YY carouselItem">
  <div class="someClass"><img src="path/to/some/picture.png" /><span>SomeTitle</span></div>
</div>

在此代码class="item_XX_YY"中，XX和YY是描述图片的类别。例如，让我们说类别动物是1（所以XX = 1），类别熊是id 5（YY = 5）。我的滑块内的每张熊图片都有item_1_5个

基本上我想要做的是过滤我的bxSilder中的项目。现在我使用以下代码

$('.categoryList').click(function() {
    var cat  = $(this).data('category');
    var type = $(this).data('type');
    $('.carouselItem').hide();
    $('.item_'+type+'_'+cat).show();
});

我的过滤工作正常，但bxSilder在其中隐藏元素的行为非常糟糕。＆＃34;下一个＆＃34;和＆＃34; prev＆＃34;按钮似乎计算任何隐藏的元素，如果它不被隐藏（这可能是预期的行为）。

但是，我不希望我的滑块考虑隐藏元素。我的问题是，如何在不破坏prev / next按钮的情况下即时过滤我的bxSlider元素？

编辑：这是一个描述问题的小提琴

http://jsfiddle.net/swrf991q/7/

一旦过滤，下一个＆amp; prev按钮不起作用+寻呼机中的幻灯片数量仍然相同。

Answer 1

搜索很长时间后，bxsilder不允许您过滤项目。我改为使用了slick slider。

如果你真的想继续使用bxsilder，你必须做的事情非常复杂

首先，您需要在html中的某个地方隐藏所有元素的副本。
首先使用destroySlider功能
然后你应该删除bxslider $('#carousel').html('')
现在将您想要查看的每个元素从隐藏副本复制到滑块div（您在此处应用过滤器）
创建一个新滑块。

我认为相反会破坏滑块＆amp;再次创建它，你可以使用redrawSlider函数，但我没有尝试过。

使用bxSlider显示/隐藏过滤滑块项

1 个答案: