Metro UI 轮播不工作答案

【问题标题】：Metro UI carousel not workingMetro UI 轮播不工作
【发布时间】：2018-01-19 18:52:49
【问题描述】：

我在 ASP.NET 页面中有以下 HTML 代码。我在metro.js 引用之前正确地添加了对jquery 脚本的引用，因为metro.js 使用jquery。我正在从 $(document).ready() 函数调用 carousal 函数，但是我的 carousal 仍然无法正常工作。我究竟做错了什么？？

编辑：我也收到一个未捕获的 typeError: Undefined is not a function error in the console (chrome)

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-2.1.1.min.js"></script>
<link href="Content/Metro.css" rel="stylesheet" />
<script src="Scripts/metro.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        alert("Hello! I am an alert box!!");
        //$('.carousel').carousel();
        $('.carousel').carousel({

            auto: true,
            period: 3000,
            duration: 2000,
            markers: {
                type: "square"
            }

        });
    });
</script>
</head>
<body>
   <form id="form1" runat="server">
    <div class="metro">
        <div class="carousel" data-role="carousel">
            <div class="slide">
                <p>slide 1</p>
            </div>

            <div class="slide">
                <h2>Slide 2</h2>
            </div>

            <a class="controls left"><i class="icon-arrow-left-3"></i></a>
            <a class="controls right"><i class="icon-arrow-right-3"></i></a>
        </div>
    </div>
 </form>
</body>
</html>

【问题讨论】：

控制台有错误吗？
是的@IrvinDominin ...我得到一个未捕获的TypeError：Undefined is not a function error in the metro.min.js 文件
托管插件 css 和 js 的站点是什么？

标签： jquery carousel metro-ui-css

【解决方案1】：

你不能用

$('.carousel').carousel({})

也可以使用

data-role="carousel"

选择其中之一

【讨论】：