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,

    });
});

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

style.css

CSS 在 Fiddle here

Answer 1

我已经在 jsfiddle 上测试过了。点有 showing.Using 与您相同的选项。您可以尝试删除 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);
});

Answer 2

遇到了同样的问题。这是由于在我的 CSS 中为幻灯片包装器设置 overflow:hidden 引起的。点在那里，但不可见。

默认Slick位置绝对点到bottom: -45px.

我认为很多人最终会通过设置 overflow:hidden 来防止在启动 Slick 之前在一个大列中显示所有幻灯片并隐藏那些当时不打算显示的幻灯片。

Answer 3

将这些代码行放在页面头部的脚本标签中：

$(document).ready(function(e) {

   $('.slicker1').slick({   

        centerMode:false,     
        draggable:false,    
        arrows:true,    
        autoplay:true,
        autoplaySpeed:1500,     
        slidesToShow:1,     
        slidesToScroll:1,   
        dots:true,

    }); 

 });

Answer 4

我遇到了同样的问题。

我设置了 overflow: hidden，customPaging 消失了。 customPaging 完全依赖点设置。

Slick JS 不显示点

Slick JS not showing dots

html

javascript

slick.js