javascript - Slick JS 不显示点

Question

我正在使用 Slick.js

出于某种原因，我似乎无法显示这些点。

这就是我的。

<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

HTML 标记

<div class="single-item">
  <div><img src="img/shadow.jpg" alt=""></div>
  <div><img src="img/shadow.jpg" alt=""></div>
  <div><img src="img/shadow.jpg" alt=""></div>
</div>

调用和选项

$(document).ready(function(){
    $('.single-item').slick({
           dots: true,
          infinite: true,
          speed: 500,

    });
});

奇怪的是，它将图像分组为幻灯片。如果我测试它是否与自动播放一起使用，则轮播可以正常工作。这些点就是不显示，即使我调用它们也是如此。

样式.css

Fiddle here 中的 CSS

Answer 1

我已经在 jsfiddle 上测试过了。点有显示。像你一样使用相同的选项。您可以尝试删除您的 style.css 并测试它是否有效。我认为 css 可能有问题，或者您可以在此处共享 style.css 内容。

http://jsfiddle.net/bo37aLbz/

代码

$(function () {
    var slickOpts = {
        dots: true,
        infinite: true,
        speed: 500,
        autoplay: true
    };

    // Init the slick    
    $('.single-item').slick(slickOpts);
});