如何使Slick轮播工作?

时间:2015-06-11 00:03:33

标签: jquery css carousel slick.js

我知道这已经被问了很多,但我已经阅读了很多与Slick相关的其他线程但是没有任何建议的修复似乎对我有用。

我已经按照http://kenwheeler.github.io/slick/上的说明操作了,但我只剩下一个页面,其中三个图像堆叠在一起,并且不会像旋转木马一样远。我有一种感觉,因为我没有在我的主要css样式表中添加任何内容,但我不知道我应该如何设计它以将其从三个静态图像转换为旋转木马!有没有人有任何想法? html页面的代码如下。有没有人知道我需要对'淡入'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>

1 个答案:

答案 0 :(得分:0)

加载您的页面和“查看来源”,尝试查看是否缺少任何文件或样式文件。只需单击链接,看看它是否会将您带到源文件。

如果您错过任何解释您问题的方法。你可以尝试Samar提到的。

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

相关问题