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

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导致我在我的bower install slick.js中包含了完全不同的库。

Answer 2

您正在选择$('.single-item') ，但您的标记包含具有类single-items元素（末尾带有“s”）。 假设这个粘贴的代码是正确的，你的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 个解决方案

解决方案1
8 2015-05-26 19:31:13

解决方案2
2 已采纳 2014-06-26 13:09:02

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

问题描述

2 个解决方案

解决方案1 8 2015-05-26 19:31:13

解决方案2 2 已采纳 2014-06-26 13:09:02

解决方案1
8 2015-05-26 19:31:13

解决方案2
2 已采纳 2014-06-26 13:09:02