Slick: Dots do not work when targeted on element within slides.

Created on 16 Dec 2016 · 8Comments · Source: kenwheeler/slick

Hi,

I need the navigation dots to be positioned relatively to that of the bottom of the content within each slide. As such i created a div with the class dots in each slide and used the following slick options:

arrows: false,
autoplay: true,
dots: true,
appendDots: $('.dots')

When the slide changes, only the dots on the first slide are updated.

Is it possible to make dots work this way?

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

https://jsfiddle.net/0gyqpLfg/3/

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

Steps to reproduce the problem

... Run jsfiddle

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

What is the expected behaviour?

Dots to alternate on each slide.
...

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

What is observed behaviour?

Dot selection on first slide only

...

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

More Details

Which browsers/versions does it happen on?
All Browsers
Which jQuery/Slick version are you using?
Jquery 3.1.1/ Slick 1.6.0
Did this work before?
Unknown

Source

tobybowers

Most helpful comment

The following will fix the issue:
slick.js v1.9.0:
Complete the updateDots() function like this:

`Slick.prototype.updateDots = function() {

var _ = this;

if (_.$dots !== null) {

    _.$dots.each(function (i) {

        _.$dots.eq(i)
            .find('li')
                .removeClass('slick-active')
                .end();

        _.$dots.eq(i)
            .find('li')
            .eq(Math.floor(_.currentSlide / _.options.slidesToScroll))
            .addClass('slick-active');

    });

}

};`

And in the initADA() function go to the each() at line 1360:

`_.$dots.attr('role', 'tablist').find('li').each(function(i) {
var mappedSlideIndex = tabControlIndexes[i];

        if (mappedSlideIndex === undefined) {
            var j = i - _.$dots.length;
            mappedSlideIndex = tabControlIndexes[j];
        }

        $(this).attr({
            'role': 'presentation'
        });

        $(this).find('button').first().attr({
            'role': 'tab',
            'id': 'slick-slide-control' + _.instanceUid + i,
            'aria-controls': 'slick-slide' + _.instanceUid + mappedSlideIndex,
            'aria-label': (i + 1) + ' of ' + numDotGroups,
            'aria-selected': null,
            'tabindex': '-1'
        });

    }).eq(_.currentSlide).find('button').attr({
        'aria-selected': 'true',
        'tabindex': '0'
    }).end();`

patrickmsieber on 30 Oct 2019

👍4

All 8 comments

@tobybowers Have you found a solution? I have the same problem.

mmintel on 11 Jan 2017

Pinging this! Same problem :( Any solutions?

kblizeck on 19 Jan 2017

I ran into this issue as well. I ended up not using the 'appendDots' option and instead doing a CSS override to position the div using the 'slick-dots' class like so:

.slick-dots { position: fixed !important; bottom: 40px !important; }

stevemeetswest on 25 Jan 2017

Bump

jtparrett on 12 Apr 2017

This works better
.slick-dots { position: sticky !important; bottom: 40px !important; }

ap-arun on 1 Sep 2018

The following will fix the issue:
slick.js v1.9.0:
Complete the updateDots() function like this:

`Slick.prototype.updateDots = function() {

var _ = this;

if (_.$dots !== null) {

    _.$dots.each(function (i) {

        _.$dots.eq(i)
            .find('li')
                .removeClass('slick-active')
                .end();

        _.$dots.eq(i)
            .find('li')
            .eq(Math.floor(_.currentSlide / _.options.slidesToScroll))
            .addClass('slick-active');

    });

}

};`

And in the initADA() function go to the each() at line 1360:

`_.$dots.attr('role', 'tablist').find('li').each(function(i) {
var mappedSlideIndex = tabControlIndexes[i];

        if (mappedSlideIndex === undefined) {
            var j = i - _.$dots.length;
            mappedSlideIndex = tabControlIndexes[j];
        }

        $(this).attr({
            'role': 'presentation'
        });

        $(this).find('button').first().attr({
            'role': 'tab',
            'id': 'slick-slide-control' + _.instanceUid + i,
            'aria-controls': 'slick-slide' + _.instanceUid + mappedSlideIndex,
            'aria-label': (i + 1) + ' of ' + numDotGroups,
            'aria-selected': null,
            'tabindex': '-1'
        });

    }).eq(_.currentSlide).find('button').attr({
        'aria-selected': 'true',
        'tabindex': '0'
    }).end();`

patrickmsieber on 30 Oct 2019

👍4

This fix works for me. Would be nice to have this implemented.