element-ui和iview以及swiper对图片轮播的对比操作

先放上我要实现的效果：

因为是公司的项目，所以图片无法显示，大概意思就是切换两个分屏展示的样式。

1.iview的轮播只能使用一个分屏展示，当切换之后再使用就无法轮播，点击事件失效，百度说是只能获取到一个事件焦点 。iview的方式只能去掉。

代码如下：（摘自官网，我写的有问题，所以代码就被我删掉了）

2.element-ui完成功能，但是模块切换的时候，会有一个几秒钟所有图片同时显示，这样页面十分凌乱，可以用z-index把背景的隐藏在另一个背景之下，完成功能。

记得将要循环的数组分割成每五项内容再形成一个新数组，外面是一个大数组包裹，这样循环起来就可以形成一屏五张图轮播。

var arr = [];
        for (var i = 0; i < this.xList.length; i += 5) {
            arr.push(this.xList.slice(i, i + 5));
        }
        this.xList = [];
        arr.forEach(item => {
            if (!(item == '' || item == null || item == 'undefined')) {
                this.xList.push({
                    content: item,
                });
            }
        });

修改z-index样式

.el-carousel__item {
    z-index: -1;
}
.el-carousel__item.is-active {
    z-index: 1;
}

3.jquery slider完美完成这项功能

 
 
    
    $(".x").slide({
            mainCell: ".bd ul",
            trigger: "click"
        });
        $(".y").slide({
            mainCell: ".bd ul",
            trigger: "click"
        });
        $(".title li").click(function () {
            var index = $(this).index();
            $(this).addClass('active');
            $(this).siblings().eq(0).removeClass('active');
            if (index == 0) {
                $(".x").show();
                $(".y").hide();
            } else {
                $(".x").show();
                $(".y").hide();
            }
        })

至此解决这项问题