如何在网站上使用unslider?

时间:2016-02-25 02:09:32

标签: javascript jquery jquery-plugins unslider

我一直在尝试在我自己的项目中使用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>

1 个答案:

答案 0 :(得分:0)

我假设您在本地运行此操作(您未通过网络服务器提供此服务)。如果是这样,那么您需要解决的问题是:

首先,您需要删除非滑动资产网址中的正斜杠。使用正斜杠意味着浏览器将查找相对于URL根目录的文件,而不是您想要的。相反,您希望浏览器在当前目录中查找该文件。

其次,在jQuery资产URL中使用https协议直接从Web获取它。 \\非常有用,因为它允许URL在从可能使用或不使用https的服务器发出请求时独立于协议。但是,当您从文件系统中提取文件时,您最终会得到file://code.jquery.com/jquery-2.1.4.min.js之类的网址,因为您的计算机上没有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>