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

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);
});

Answer 2

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

默认情况下，滑动位置绝对位于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完全依赖于点设置。

光滑的JS没有显示点

4 个答案: