如何让 Slick carousel 工作？ [关闭]答案

【问题标题】：How do I get Slick carousel to work? [closed]如何让 Slick carousel 工作？ [关闭]
【发布时间】：2015-06-11 00:03:32
【问题描述】：

我知道这个问题已经被问了很多，但我已经阅读了大量与 Slick 相关的其他线程，但似乎没有一个建议的修复对我有用。

我已按照http://kenwheeler.github.io/slick/ 上的说明进行操作，但只剩下一个页面，该页面包含三个相互堆叠的图像，并且与旋转木马一点也不像。我有一种感觉，这是因为我没有在我的主要 css 样式表中添加任何东西，但不知道我应该如何设置它的样式以将它从三个静态图像变成一个轮播！有没有人有任何想法？ html页面的代码如下。有谁知道我需要对'fade' div 类做什么才能使其正常工作？还是不是样式表问题？

任何帮助将不胜感激。谢谢！

<!doctype html>

<html>

<head>
    <meta charset="utf-8">
    <title>Title will go here</title>
    <meta name="description" content="Description">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" type="text/css" href="slick/slick.css" />
    <!-- // Add the new slick-theme.css if you want the default styling -->
    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css" />

</head>

<body>



    <section id="magazine">


        <div class="container group">


            <div class="fade">
                <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
                <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
                <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
            </div>


        </div>


    </section>



    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="slick/slick.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('.fade').slick({
                dots: true,
                infinite: true,
                speed: 700,
                autoplay: true,
                autoplaySpeed: 2000,
                arrows: false,
                slidesToShow: 1,
                slidesToScroll: 1
            });

        });
    </script>


</body>

</html>

【问题讨论】：

标签： jquery css carousel slick.js

【解决方案1】：

加载您的页面并“查看源代码”，尝试查看您的任何文件或样式脚本是否丢失。只需单击链接，看看它是否会将您带到源文件。

如果您缺少任何可以解释您的问题的信息。你可以试试 Samar 提到的。

如果所有文件都存在并链接，请检查您的 JavaScript 控制台，如果有任何错误，也许这会提示您的问题。否则，我在你的标记中找不到任何明显的东西。

【讨论】：

这就是问题所在。这是在这一行中缺少一个'http：' - -和下面的那个导致了这个问题。一旦我添加了它，一切都会无缝运行。非常感谢！