javascript - Slick JS not showing dots - Stack Overflow

admin管理员组

文章数量:1199534

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

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

• javascript
• html
• slick.js

Share Improve this question Follow edited Apr 26, 2015 at 18:06 user2898276 asked Apr 26, 2015 at 17:10 user2898276user2898276 26311 gold badge22 silver badges1111 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 10

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

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.

I had the same problem.

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

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,

    }); 

 });

本文标签： javascriptSlick JS not showing dotsStack Overflow