Open tobybowers opened 7 years ago
@tobybowers Have you found a solution? I have the same problem.
Pinging this! Same problem :( Any solutions?
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; }
Bump
This works better
.slick-dots { position: sticky !important; bottom: 40px !important; }
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();`
This fix works for me. Would be nice to have this implemented.
This works great for me, I second that it would be good for it to be implemented
Has this been fixed? I downloaded the latest release which is 1.8.1 but the issue is still there.
Applying adjustments from above worked like a charm! Thank you!
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
====================================================================
What is the expected behaviour?
Dots to alternate on each slide. ...
====================================================================
What is observed behaviour?
Dot selection on first slide only
...
====================================================================
More Details