Slick JS not showing dots

Question

I'm using 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

<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

Answer 1

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.

http://jsfiddle.net/bo37aLbz/

Code

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

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

Answer 2

Experienced the same problem. It was caused by setting overflow:hidden for the slideshow wrapper in my CSS. The dots were there, but not visible.

By default Slick position dots absolutely to bottom: -45px.

I think lot of people will end up by setting overflow:hidden in 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.