使用理想的图像滑块，但只在屏幕上留下图像答案

【问题标题】：Using ideal image slider but just leaves images on screen使用理想的图像滑块，但只在屏幕上留下图像
【发布时间】：2017-02-19 22:23:39
【问题描述】：

我在让this 滑块工作时遇到问题。我从凉亭安装开始。我在标题中包含css和默认值，在正文中包含javascript，然后我添加了一些我自己的js来加载滑块，但它只是在屏幕上显示图像而不构建滑块。我知道这一定是加载问题，但我一直在尝试加载 js，但它似乎不起作用。这是我创建的一个示例文件，只是为了在没有任何其他网站代码的情况下对其进行测试。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link href="./bower_components/ideal-image-slider/ideal-image-slider.css" rel="stylesheet">
        <link href="./bower_components/ideal-image-slider/themes/default/default.css" rel="stylesheet">
        <script src="./bower_components/ideal-image-slider/ideal-image-slider.min.js"></script>
        <script type="text/javascript">
            (function() {
                var slider = new IdealImageSlider.Slider({
                    selector: '#slider',
                    height: 400, // Required but can be set by CSS
                    interval: 4000
                });
                slider.start();
                console.log("slideshow hit");
            })();
        </script>
    </head>
    <body>
        <div id="slider">
            <img src="./src/images/rotate/img01.JPG" alt="Minimum required attributes">
            <img src="./src/images/rotate/img02.JPG" alt="Use data-src for on-demand loading">
            <img src="./src/images/rotate/img03.JPG" alt="Use data-src for on-demand loading">
            <img src="./src/images/rotate/img04.JPG" alt="Use data-src for on-demand loading">
            <img src="./src/images/rotate/img05.JPG" alt="Use data-src for on-demand loading">
        </div>
    </body>
</html>

我知道这将是一个简单的改变，但我现在看不到。提前致谢。

【问题讨论】：

标签： javascript jquery bower-install

【解决方案1】：

尝试改变这个集团

<img src="./src/images/rotate/img01.JPG" alt="Minimum required attributes">
<img src="./src/images/rotate/img02.JPG" alt="Use data-src for on-demand loading">
<img src="./src/images/rotate/img03.JPG" alt="Use data-src for on-demand loading">
<img src="./src/images/rotate/img04.JPG" alt="Use data-src for on-demand loading">
<img src="./src/images/rotate/img05.JPG" alt="Use data-src for on-demand loading">

通过这个

<img src="./src/images/rotate/img01.JPG" alt="slide 1">
<img data-src="./src/images/rotate/img02.JPG" alt="slide 2" src="">
<img data-src="./src/images/rotate/img03.JPG" alt="slide 3" src="">
<img data-src="./src/images/rotate/img04.JPG" alt="slade 4" src="">
<img data-src="./src/images/rotate/img05.JPG" alt="slide 5" src="">

【讨论】：

这只是在替代文本周围放置框，而不是显示图像。它仍然只是在它之后显示第一张图片和替代文本。仍然意味着 js 没有以正确的顺序读取。不知道为什么。我正在使用 wamp 服务器，一切似乎都运行正常。但是我有一个操作顺序不适用于渲染 js。

【解决方案2】：

我发现正文末尾的这两个脚本标签起到了作用。

<script src="./bower_components/ideal-image-slider/ideal-image-slider.min.js"></script>

<script>
    new IdealImageSlider.Slider({
        selector: '#slider',
        height: 400
    });
</script>

就像我怀疑的那样，我在错误的地方加载了 js。谢谢大家。

【讨论】：