如何让 Slick 轮播工作？

Question

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

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

如有任何帮助，我们将不胜感激。谢谢！

<!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>

Answer 1

加载您的页面并'View Source'，尝试查看您的文件或样式脚本是否丢失。只需单击链接，看看它是否将您带到源文件。

如果您遗漏了任何可以解释您的问题的内容。你可以试试Samar说的。

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

如何让 Slick 轮播工作？

How do I get Slick carousel to work?

jquery

css

carousel

slick.js