carousel 插件隐藏列表中几项导致左右切换出错

1、

一般的应用场景：

 

用于左右快速切换显示的列表内容，比如对员工的切换。

对于这种情况必不可少需要按照部门进行搜索，目前我的做法是首次加载所有该用户可以查看的员工列表，选择部门后又选择的隐藏掉其他不在本部门的员工。

但是选择后左右切换按钮不能点击或者上下页切换顺序不对。

原因：插件会根据每个item的宽以及整个容器的宽来计算该显示几个，当我们隐藏掉其中几个时，看起来好像是对的，但其实页面体现的根本就不是插件计算出的结果，最终导致后面的切换出现问题，因为隐藏掉的item其实也是参与计算的，源码中并没有对隐藏的item进行处理。

解决方案：

顺便捎带一句：查看文档很重要

文档中有对items参数的设置说明

把items参数设置成你真正要显示出来的item

我的写法：

$(".jcarousel").on('jcarousel:create jcarousel:reload', function() {
                var allwidth = $(".jcarousel").width();
                var itemwidth = ul.find("li:first").outerWidth();
                step = parseInt(allwidth / itemwidth);
            }).jcarousel({
                items: $("#empul li:visible")
            });

2、还是上面的场景，如果可以根据姓名等搜索

当你切换到大于1的页面，就是你切换到第二页，第三页等，这是输入姓名进行搜索，有可能结果是空的，或者结果不全（假定判断逻辑代码没有问题），郁闷了吧！

其实这是你可以点击pre切换按钮试试，被藏起来了

解决方案：

$('.jcarousel').jcarousel('scroll', 0);

案例中我的页面结构:

<div class="jcarousel col-md-10 col-sm-10 col-xs-10">
        <ul id="empul">
           
                <li> 
                    
                    
                </li>
              
        </ul>
    </div>