Slick: Dots keep appearing even if it's one slide Version 1.7.1

Created on 17 Aug 2017  路  19Comments  路  Source: kenwheeler/slick

short description of the bug / issue, provide more detail below.

Dots keep appearing even if it's one slide "this problem if not mistaken appears only on 1.7.1 version I had to downgrade to 1.6.0 to get rid of the dots. thanks and all the best to slick team nice job!! "

[ paste your jsfiddle link here ]

This is my jsfiddle-link:
http://jsfiddle.net/fmo50w7n/1350/

use this jsfiddle to reproduce your bug:
http://jsfiddle.net/simeydotme/fmo50w7n/
we will likely close your issue without it.

====================================================================

Steps to reproduce the problem

  1. Add a single slide to the slider
  2. set dots: true
  3. Run the script ;)

====================================================================

What is the expected behaviour?

For single-slide sliders the dot-navigation should be hidden

====================================================================

What is observed behaviour?

Dot-navigation are added, even if there is only one slide in the slider.

====================================================================

More Details

  • Which browsers/versions does it happen on? *
  • Which jQuery/Slick version are you using? 1.7.1
  • Did this work before? When downgrading to 1.6 it works as expected.

Most helpful comment

Use ":only-child" selector

All 19 comments

I updated my bug-descreption. Thx.

it seems like it thanks for your effort Sir!

Should be fixed now. Thanks!

Uhm, I still get it with version 1.8.1

I'm also getting this issue with anything above 1.6

Version 1.8.1 solves this problem. However, OP has only updated slick.js and not slick.min.js. Use slick.js in your stack for now.

Use ":only-child" selector

This issue still persists in the min.js versions hosted on various CDNs.
I do find it hard to understand why the two files are not identical.

Noting this issue still persists in the min.js version. Works perfectly - even with slidesToShow settings at different breakpoints with the slick.js (non minified) version.

I can confirm that this issue still persists in the distributed minified version.

Thanks for posting a solution for this. The min.js version problem still exists.

With above solution you don't display the first dot when there are multiple slides.
If you want a solution with .scss use following:

.slick-dots {
    > li {
        display: inline-block;
    }
    > li:only-child {
        display: none;
    }
}

Hello to all!

Do you have an idea when the minified version will be available?

Thanks!

Just to let you know... We've used the non minified version but our custom inline styles on each of our slides were removed between 768px and 1199px by the slick scripts... The minified version of slick does not have the bug... Can anyone confirm?

With above solution you don't display the first dot when there are multiple slides.
If you want a solution with .scss use following:

.slick-dots {
    > li {
        display: inline-block;
    }
    > li:only-child {
        display: none;
    }
}

Nice thinking there good sir!

What about to release the functionality in the minified version too?

This is still a bug - switching to the non-minified version resolves the issue for us. We compile everything using Yarn so we don't necessarily need the minified version but that was a decent hour I'll never see again! 馃檭

The problem is with the slick-dotted class which is getting added even if there is one item in the slick. and slick-dotted class is adding margin-bottom of 30px.
@wecreatedigital Thanks for the suggestion, switching to the non-minified version resolves the issue for me as well.

Was this page helpful?
0 / 5 - 0 ratings