Slick: Multiple dots navigation

[mhlozek]

I need dots inside every slide. I have something like that:

$('.homepage-slider').slick({
    dots: true,
    appendDots: ".slide"
});

Dots are attached correctly, but dot for current slide is marked as active only in first slide.

[kenwheeler]

I'm struggling to understand the use case. If you had dots in each slide, couldn't you just put dots in each slide and use the slideIndex to mark active? Get the number by getting the slideCount?

[ethanclevenger91]

The use case is kind of a design decision - the navigation is within the slide and rather than absolutely position a div outside the slide but on top of it, it makes more sense to duplicate the markup for the visual effect.

Because appendDots will put the dots on every slide, one would think that they would all reflect changes to the slider state as well, perhaps out of the box.

[tyrann0us]

This is my Quick 'n Dirty version:

var activeClass = 'slick-active',
    ariaAttribute = 'aria-hidden';
$( '.slider' )
.on( 'init', function() {
    $( '.slick-dots li:first-of-type' ).addClass( activeClass ).attr( ariaAttribute, false );
} )
.on( 'afterChange', function( event, slick, currentSlide ) {
    var $dots = $( '.slick-dots' );
    $( 'li', $dots ).removeClass( activeClass ).attr( ariaAttribute, true );
    $dots.each( function() {
        $( 'li', $( this ) ).eq( currentSlide ).addClass( activeClass ).attr( ariaAttribute, false );
    } );
} );

$( '.slider' ).slick();

Not pretty, but it works for me.

[Ganesh-gd]

It is worked for me but there is speed delay.

[ianmcl]

$dots is already in the slick object

.on( 'afterChange', function( event, slick, currentSlide ) {
  $.each(slick.$dots, (i, el) => {
    $(el).find('li').eq(currentSlide).addClass('slick-active').find('button');
  })
});