开发撞墙之奇怪的需求：弹出轮播图

Layui弹窗加轮播图的奇怪组合 ：

由于需要只凭一个按钮就弹出自定义的内容，那自然就想到弹层组件了

showCarousel:function (list){ //传入路径列表
    for(var i=0;i<list.length-1;i++){
        if(list[i].indexOf(".mp4")!=-1)
        tem+="<div><video width='100%' height='100%' controls='controls' 
        autobuffer='autobuffer' autoplay='autoplay'><source src='"+list[i]+"' 
        type='video/mp4' /></video></div>"; 
        else
        tem+="<div><img src='"+list[i]+"'></div>";
    }
    layer.open({
        type: 1,
        title:false,//由于是轮播图就不展示标题了
        area: ['1200px', '800px'],//弹窗大小
        shadeClose: true, //点击遮罩关闭
        content: `<div class="layui-carousel" id="media">
                        <div carousel-item>
                            ${tem}    //反义字符串模板插入函数使用${}，这里插入拼接好的模板
                        </div>
                  </div>`
    }
    );

    layui.use(['carousel'], function () {
        var carousel = layui.carousel;
        carousel.render({
        elem: '#media'
        , width: '100%' //设置容器宽度
        , height: '100%' //设置容器高度
        //full:'true' //是否全屏轮播,默认false
        , arrow: 'hover' //始终显示箭头和点击按钮
        // ,anim: 'updown' //切换动画方式，可从各个方向滚动
        ,autoplay:false
    });
    });
},

实际上如果有缩略图的话可以直接使用（）layer.photos(options) - 相册层或者jQuery的FancyBox貌似会更方便一些

layer弹层组件开发文档 - Layui