Question

我第一次尝试实现一个光滑的滑块，但它不起作用，我在控制台中没有出现任何错误。在演示中，每张幻灯片的div在启动时都具有以下属性：

<div class="slick-slide"  style="width: 560px; position: relative; left: 0px; top: 0px; z-index: 900; opacity: 1;">

但在我的滑块中没有给出这些属性，也没有任何反应。以下是我的代码：

  <head>
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
</head>

<div class="slider fade">
                    <div><div class="image"><img src="img/fonz1.png"/></div></div>
                    <div><div class="image"><img src="img/fonz2.png"/></div></div>
                    <div><div class="image"><img src="img/fonz3.png"/></div></div>
                </div>



<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/highlight.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript" src="slick/slick.js"></script>

            <script type="text/javascript">
            $(document).ready(function(){
                $('.fade').slick({
                       dots: true,
                      infinite: true,
                      speed: 500,
                      fade: true,
                      slide: '> div',
                      cssEase: 'linear'
                });
            });
        </script>

Answer 1

删除额外的div：

变化：

<div><div class="image"><img src="img/fonz1.png"/></div></div>

要：

<div class="image"><img src="img/fonz1.png"/></div>

class="image"是可选的

Answer 2

也许迟到但摆脱

slide: '> div',

在光滑的功能中。你不需要它。

光滑的滑块没有正确启动

2 个答案: