loading的样式

老师帮我看看吧，我自己对了半天源码还是没找到控制台报错的位置，谢谢老师,

import './slider.css';
import './btn.css';

import Slider from './module';

import render from './slider.art';
import { getData, getDelayedData } from 'api/getData';

const layoutEl = document.getElementById('slider-layout');

getData(
    'https://www.imooc.com/api/mall-PC/index/slider?icode=J5E0AF3DF0B7224D5'
).then(data => {
    console.log(data);
    //[{url: 'http://alimc.img.imo]
    // layoutEl.innerHTML = render({
    //     items: data
    // });

    const slider = new Slider(document.querySelector('.slider'), {
        initialIndex: 0,

        animation: true,
        // 切换速度，单位：ms
        speed: 300,
        // 自动切换，单位：ms
        autoplay: 0
    });

    const leftbtn = document.getElementById('leftbtn');
    const rightbtn = document.getElementById('rightbtn');
    const bannerEl = document.getElementById('banner');



    leftbtn.addEventListener('click', () => {
        slider.prev();
    }, false);

    rightbtn.addEventListener('click', () => {
        slider.next();
    }, false);

    // 鼠标移入幻灯片停止自动切换
    bannerEl.addEventListener('mouseenter', () => {
        slider.pause();
    }, false);

    // 鼠标移出幻灯片开始自动切换
    bannerEl.addEventListener('mouseleave', () => {
        slider.autoplay();
    }, false);
});

loading

.loading {
    width: 100%;
    font-size: 14px;
    text-align: center;
}

.loading-inline.loading-indocator,
.loading-inline.loading-text {
    display: inline-block;
}

loading.art

<div class="loading {{inline ? 'loading-inline':''}}">
    <div class="loading-indocator">
        <img src="./loading.gif" alt="loading" />
    </div>
    <div class="loading-test">
        loading......
    </div>
</div>

同学你好，在源码中测试同学粘忒的这部分代码，loading效果是可以正常显示的，同学保存文件后，重启项目试试，如下：

代码中的报错是因为没有设置layoutEl的内容，此时页面中并不存在slider元素，无法获取到对应的元素，所以会出现报错。

将下图所示的注释去掉，就不会出现报错了，如下：

祝学习愉快~

老师，按照您的步骤，我重新启动，依然不生效，同时还有这段代码