如何在网站上使用 unslider？答案

【问题标题】：How to use unslider on website?如何在网站上使用 unslider？
【发布时间】：2016-02-25 02:09:31
【问题描述】：

我一直在尝试在我自己的项目中使用 unslider (jQuery)。尽管按照https://idiot.github.io/unslider/ 网站上的说明进行操作，但我似乎无法正常工作。

有人愿意看看我的代码并就这里可能出现的问题提供一些反馈吗？

谢谢！

<!doctype html>
<html>

<head>
<title>Testing unslider</title>

<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" href="/unslider-master/dist/css/unslider.css">
<link rel="stylesheet" href="/unslider-master/dist/css/unslider-dots.css">

</head>

<body>

<div class="my-slider">
    <ul>
        <li>My slide</li>
        <li>Another slide</li>
        <li>My last slide</li>
    </ul>
</div>

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="/unslider-master/src/js/unslider.js"></script>

<script>
    jQuery(document).ready(function($) {
        $('.my-slider').unslider();
    });
</script>

</body>

</html>

【问题讨论】：

打开开发者控制台。你看到什么错误？是否正在加载所有文件（CSS、JavaScript）？

标签： javascript jquery jquery-plugins unslider

【解决方案1】：

我假设您是在本地运行此程序（您不是通过网络服务器提供此程序）。如果是这种情况，您需要解决以下问题：

首先，您需要去掉 unslider 资产 URL 中的正斜杠。使用正斜杠意味着浏览器将查找相对于 URL 根目录的文件，这不是您想要的。相反，您希望浏览器在当前目录中查找文件。

其次，使用https 作为 jQuery 资产 URL 中的协议，以直接从 Web 获取它。 \\ 很有用，因为它允许 URL 在从可能使用或不使用 https 的服务器发出请求时独立于协议。然而，当你从你的文件系统中获取文件时，你最终会得到一个像file://code.jquery.com/jquery-2.1.4.min.js 这样的 URL，因为 jQuery 不在你的机器上，所以它会失败。

这是一个工作版本：

<!doctype html>
<html>
    <head>
        <title>Testing unslider</title>
        <meta charset="utf-8" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="unslider-master/dist/css/unslider.css">
        <link rel="stylesheet" href="unslider-master/dist/css/unslider-dots.css">
    </head>
    <body>
    <div class="my-slider">
        <ul>
            <li>My slide</li>
            <li>Another slide</li>
            <li>My last slide</li>
        </ul>
    </div>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="unslider-master/src/js/unslider.js"></script>
    <script>
        jQuery(document).ready(function($) {
            $('.my-slider').unslider();
        });
    </script>
    </body>
</html>

【讨论】：