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

Course

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

Malediction

you're correct. It appears something is preventing it within my CSS. Anyway of finding out what? I'll edit question and add CSS. – Course

Try move your style.css to the last one and see the dot shown up or not. I think have issue with "li" css inside your style css. Try remove this code ul { margin: 0; padding: 0; } ul li { list-style: none; margin: 0; padding: 0; float: left; width: 310px; } – Malediction

That worked! ( removing code) Thanks. Dots don't look right now. Seems to show broken characters. dl.dropboxusercontent.com/u/46025079/… – Course

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.

Exhaustive

Answer 3

I had the same problem.

I've set overflow: hidden, and the customPaging disappeared. customPaging relies entirely on the dots setting.

Hildegardehildesheim

Answer 4

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,

    }); 

 });

Torchbearer

I would say this is the correct answer for a newer version ? The dots weren't in my DOM like previous comments said. So now it is not visible by default ? – Mirage