如何在jquery中基于搜索过滤器管理动态引导转盘幻灯片

我面临着如何管理动态引导转盘幻灯片的挑战。 要求是我的过滤器功能在下拉菜单选择和复选框检查上工作

我在每张幻灯片中有5个分区。如果div length变为5+，它将显示在下一张幻灯片中

当我选择下拉菜单选项时，例如，我从下拉列表中选择选项1，所有与“选项1”相关的div应显示在幻灯片中，如果div大小小于5，则仅显示一张幻灯片，如果div大小为5+，则下一个div将显示在另一张幻灯片中。 还有一个挑战是，当您选择“选项1”，然后单击DIV也重新筛选的复选框时

我尝试使用数组和循环，但没有得到任何解决方案。请帮忙

我的结构如下所示：

<div class="FilterSection">
        <select class="category form-control" >
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
        <option value="option4">Option 4</option>
    </select>
    <div class="checkboxSection" style="color:red;">
        <input type="checkbox" value="checkbox1" /> Checkbox1 
        <input type="checkbox" value="checkbox2" /> Checkbox2 
        <input type="checkbox" value="checkbox3" /> Checkbox3 
        <input type="checkbox" value="checkbox4" /> Checkbox4 
        <input type="checkbox" value="checkbox5" /> Checkbox5 
    </div>
    <div class="filterResultSection">
        <div class="option1 checkbox1 well text-info">Div container 1</div>
        <div class="option2 checkbox2 well text-info">Div container 2</div>
        <div class="option3 checkbox3 well text-info">Div container 3</div>
        <div class="option4 checkbox4 well text-info">Div container 4</div>
        <div class="option2 checkbox5 well text-info">Div container 5</div>
    </div>
</div>

选择1
选择2
选择3
选择4
复选框1
复选框2
复选框3
复选框4
复选框5
分区货柜1
分区货柜2
分区货柜3
分区货柜4
分区货柜5

请添加整个代码。样式、HTML、JS和永恒插件。如果可能的话，把它们放在一把小提琴里。谢谢。@Tanvi:我已经创建了实际示例，请检查。同样在加载时，我在.item中使用了slice和wrap div，但在筛选过程中，应该使用新记录更新item容器并覆盖现有的slide请添加整个代码。样式、HTML、JS和永恒插件。如果可能的话，把它们放在一把小提琴里。谢谢。@Tanvi:我已经创建了实际示例，请检查。同样在加载时，我在.item中有slice和wrap div，但在筛选过程中，应该使用新记录更新item容器，并覆盖现有幻灯片