使用 bxSlider 过滤 Show/Hide 的滑块项

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）。我的滑块中的每张熊图片都会有 class item_1_5

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

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

我的过滤工作正常，但 bxSilder 的行为非常奇怪，其中包含隐藏元素。 "next" 和 "prev" 按钮似乎可以计算任何隐藏的元素，就像它没有被隐藏一样（这可能是预期的行为）。

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

编辑 : 这是fiddle描述问题

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

过滤后，下一个和上一个按钮不起作用 + 寻呼机中的幻灯片数量仍然相同。

Answer 1

找了半天，bxsilder 不让你过滤条目。我改用 slick slider。

如果你真的想继续使用bxsilder，你要做的事情相当复杂

首先，您需要 html.
首先使用destroySlider函数销毁滑块
那么你应该从 bxslider 中删除每个元素 $('#carousel').html('')
现在将你想从隐藏副本中看到的每个元素复制到滑块div（你在这里应用你的过滤器）
创建一个新滑块。

我认为您可以使用 redrawSlider 函数，而不是销毁滑块并重新创建它，但我还没有尝试过。

使用 bxSlider 过滤 Show/Hide 的滑块项

Filter slider item with Show/Hide using bxSlider

html

javascript

css

jquery

bxslider