Multiple dots navigation

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.

[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.

[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');
  })
});