【已解决】LayUI弹出层的轮播图不显示问题

一、问题描述：

• 弹出层没有内容
• 轮播图没有效果

二、问题出现原因

• 出现问题不可怕，可怕的是出现问题不知道从何处入手，而后导致百度关键字也是很模糊（不知道自己要找什么），之后就容易耽误时间而且还解决不了问题
• 解决一个问题的前提是要对这个问题的基础知识有一定的了解，不然胡乱解决了也是容易出问题的（知其然而不知其所以然）

2.1、没有内容

• 没有内容的情况，打开控制台检查当前弹出框内的元素，如果确实没有或者隐藏了就要检查代码编写是否有问题。

layer.open({
    title: titles, // 标题titles变量
    btn: [], // 这里只做展示而不需要按钮
    area: ['80%', '70%'], // 弹窗框区域大小
    content: contents, //如果没有内容需要检查文本内容contents变量
    success: function () {
        //建造实例
        carousel.render({
            elem: '#testSwiperOpen', //实例定位
            width: '100%' //轮播图宽度
        });
    },
    maxmin: true // 最大最小
});

2.2、没有轮播图效果

• 轮播图elem的值不是轮播图的元素，初始化失败就出现如上灰色有转圈圈，可能的原因有如下几点：
  1. 样式加载失败。首先检查有没有写样式文件 layer.css 地址；其次检查样式位置是否正确，可以打开控制台看看有没有报错，以及network中红色的失败请求地址有没有
  2. 轮播图渲染失败。网上有一些reload轮播图的博文，但是发现根本没有用，因为它的目的是当更改了轮播图内容时才需要重新加载，不然已经初始化了再去重新reload又有何意义（重复操作无意义）。其次检查初始化轮播图的对象是否正确，特别是要注意id唯一性的问题，因为代码是从官网直接复制过来用的，对于id也没有做修改，加上已经有了<table id='test'>的元素，所以初始化就失败了。
•  

三、问题解决

1. 检查基本的样式加载是否正确：一个是要有加载文件，另一个是文件访问地址要正确
2. 检查轮播图初始化对象是否是需要的：id唯一性则$("#test")只取最先出现的，检查是否有重复的id或者自定义一个不会重复的id也是可行的，比如id=testSwiperOpen

注：当然使用$("[id=test]")获取所有id=test的元素（但是一般不会这样去做）

备注： 本文主要是借助博客环境，同大家讨论异常问题解决的办法，欢迎大家评论，谢谢！