Question

我遇到问题，让this滑块起作用。我开始使用bower安装。我在标题中包含css和默认值，并在正文中包含javascript，然后我添加了一些自己的j来加载滑块，但它只是在屏幕上显示图像而不构建滑块。我知道它一定是一个加载问题，但我一直试图在其他所有东西之后加载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>

我知道这将是一个简单的改变，但我现在还没有看到它。提前谢谢。

Answer 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="">

Answer 2

我在身体末端发现了这两个脚本标签。

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

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

我把js装在错误的地方，就像我怀疑的那样。谢谢大家。

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

2 个答案: