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

Filter slider item with Show/Hide using bxSlider

本文关键字：过滤 项目 隐藏 bxSlider 显示 使用      更新时间：2023-09-26

我的网页上有一个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/

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

搜索了很长时间后，bxsilder不允许您过滤项目。我改用了光滑的滑块。

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

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

我认为与其销毁滑块并再次创建它，不如使用 redrawSlider 函数，但我还没有尝试过。

相关文章：