Slick.js 的滑块未显示

Question

我遵循了如何使用 slick 制作滑块的所有步骤，但由于某些原因，图片只是相互堆叠，而不是变成幻灯片 HTML代码：

<!--Slider-->
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!--Main-->
    <main>

        <!--Slider-->
        <div class="container-fluid p-0">
            <div class="site-slider">
                <div class="slider-one">
                    <div>
                        <img src="assets/slide1.jpg" class="wid img-fluid" alt="Slika 1">
                    </div>
                    <div>
                        <img src="assets/slide2.jpg" class="wid img-fluid" alt="Slika 1">
                    </div>
                    <div>
                        <img src="assets/slide3.jpg" class="wid img-fluid" alt="Slika 1">
                    </div>
                </div>
            </div>
        </div>
    </main>


 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <script src="js/main.js"></script>

这是我的 JS 文件：

$('.slider-one').slick({
    autoplay:true,
    autoplaySpeed:3000,
    dots:true
});

我一直在尝试解决这个问题，但无济于事。所以任何帮助都会很棒。提前致谢 :D

Answer 1

在不指定特定协议的情况下使用双斜线

当您使用双斜杠 src="\foo" 加载资源时，您并未定义协议（http、https）。
脚本将使用用于加载页面本身的相同协议进行加载。

如果您没有使用网络服务器，它将无法运行。
在您的示例中，您可以看到它正在尝试加载 file://foo"，您计算机上的一个文件。

添加协议，https 在您的情况下，将确保您成功加载资源。

Slick.js 的滑块未显示

Slider for Slick.js is not showing

javascript

html

css

slider

slick.js

在不指定特定协议的情况下使用双斜线