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

【问题标题】：Filter slider item with Show/Hide using bxSlider使用 bxSlider 使用显示/隐藏过滤滑块项目
【发布时间】：2016-03-07 16:19:08
【问题描述】：

我的网页上有一个带有以下选项的 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 的行为非常奇怪，其中隐藏了元素。 “下一个”和“上一个”按钮似乎可以计算任何隐藏的元素，比如它没有隐藏（这可能是预期的行为）。

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

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

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

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

【问题讨论】：

元素是如何隐藏的？使用display 或使用visibility。为什么一开始就隐藏了一些元素。最后给我们一个小提琴或一个链接，我们可以看到这个。
我会尽快添加一个 JSFiddle（可能明天）。对于隐藏元素，我使用 jQuery hide() 和 show() 函数，这是一个显示无/块。但是，我尝试使用可见性隐藏/可见，但结果是一样的。这些元素首先被隐藏，因为我想过滤滑块内的内容。我有很多图片，例如只是想展示熊或花（或彩虹......）
@GaryOlsson 您找到解决方案了吗？我有同样的问题。
不幸的是，没有。我尝试的每个解决方案都会导致其他错误或奇怪的行为。我换了另一个滑块slick

标签： javascript jquery html css bxslider

【解决方案1】：

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

如果你真的想继续使用bxsilder，你必须做的是相当复杂的

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

我认为您可以使用redrawSlider 函数代替销毁滑块并再次创建它，但我没有尝试过。

【讨论】：