Dots do not work when targeted on element within slides.

tobybowers commented 7 years ago

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

mmintel commented 7 years ago

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

kblizeck commented 7 years ago

Pinging this! Same problem :( Any solutions?

stevemeetswest commented 7 years ago

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

jtparrett commented 7 years ago

Bump

ap-arun commented 6 years ago

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

patrickmsieber commented 4 years ago

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();`