Question

我正在尝试将此jQuery插件（http://kenwheeler.github.io/slick/）用于旋转木马。我尝试了很多不同的插件，但我总是遇到某种错误。所以，我坚持这一点，直到我弄清楚什么是错的。

这是我的HTML主管：

<head>
    <!--[if lt IE 9]>
        <script src='http://html5shiv.googlecode.com/svn/trunk/html5.js'></script>
    <![endif]-->
    <meta charset='utf-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <link rel="stylesheet" type="text/css" href="slick/slick.
        <script type=" text/javascript " src="slick/slick.min.js "></script>
        <script type="text/javascript " src='/js/carousel.js'></script>
</head>

当我尝试它的时候，我得到了一个'未捕获的TypeError：undefined不是一个函数'，在我的JS中，我调用了函数'slick'。在这里，我称之为：

<div class="slider single-items"><div></div><div></div><div></div></div>

这是我的carousel.js：

$(document).ready(function () {
    $('.single-item').slick({
        dots: true,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true
    });
});

Answer 1

我有类似的问题，但在我的情况下问题是：

我已经bower install slick安装了光滑而不是bower install slick.js，这导致我的家属中包含了完全不同的库。

Answer 2

您正在选择$('.single-item')，但您的标记中包含类single-items的元素（最后带有＆＃34; s＆＃34;）。假设此粘贴代码正确，则应将jQuery更改为$('.single-items')。

$(document).ready(function () {
    $('.single-items').slick({
        dots: true,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true
    });
});

JSFiddle：http://jsfiddle.net/N6wfG/

jQuery光滑（carousel）插件无法正常工作

2 个答案: