javascript Slick JS 不显示点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29880735/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Slick JS not showing dots
提问by user2898276
I'm using Slick.js
我正在使用Slick.js
For some reason I can't seem to get the dots to show.
出于某种原因，我似乎无法显示点。
This is what I have.
这就是我所拥有的。
<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 Markup
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>
Calling and options
呼叫和选项
$(document).ready(function(){
$('.single-item').slick({
dots: true,
infinite: true,
speed: 500,
});
});
Weirdly it groups the images into a slideshow. If I test whether it's working with autoplay the carousel works. The dots are just not showing, even though I call them.
奇怪的是，它将图像分组为幻灯片。如果我测试它是否与自动播放一起工作，则轮播会起作用。点只是没有显示，即使我打电话给他们。
style.css
样式文件
CSS in a Fiddle here
CSS in a Fiddle here
回答by Faiz
I already test at jsfiddle. The dot have showing.Using same option like you do. Can you try remove your style.css and test if it work or not. I think maybe have issue with css or you can share the style.css content here.
我已经在 jsfiddle 进行了测试。点有显示。使用与您相同的选项。您可以尝试删除您的 style.css 并测试它是否有效。我想也许 css 有问题，或者你可以在这里分享 style.css 内容。
Code
代码
$(function () {
var slickOpts = {
dots: true,
infinite: true,
speed: 500,
autoplay: true
};
// Init the slick
$('.single-item').slick(slickOpts);
});
回答by Lukaash
Experienced the same problem. It was caused by setting overflow:hiddenfor the slideshow wrapper in my CSS. The dots were there, but not visible.
遇到了同样的问题。这是由overflow:hidden我的 CSS 中的幻灯片包装器设置引起的。点在那里，但不可见。
By default Slick position dots absolutely to bottom: -45px.
默认情况下，Slick 位置点绝对为bottom: -45px.
I think lot of people will end up by setting overflow:hiddenin order to prevent displaying all slides in one big column before Slick is initiated and hides the ones not meant to be displayed at that moment.
我认为很多人最终会通过设置overflow:hidden以防止在启动 Slick 之前将所有幻灯片显示在一个大列中，并隐藏当时不打算显示的幻灯片。
回答by Hasnain Mehmood
Put these lines of code in head of the page in script tags :
将这些代码行放在页面头部的脚本标签中：
$(document).ready(function(e) {
$('.slicker1').slick({
centerMode:false,
draggable:false,
arrows:true,
autoplay:true,
autoplaySpeed:1500,
slidesToShow:1,
slidesToScroll:1,
dots:true,
});
});
回答by undisclosed
I had the same problem.
我有同样的问题。
I've set overflow: hidden, and the customPagingdisappeared.
customPagingrelies entirely on the dots setting.
我已经设置了overflow: hidden，然后customPaging消失了。
customPaging完全依赖于点设置。
