Slick carousel appendDots inside a slide loses active class

Question

I'm trying to appendDots so the dots are inside each slide for positioning reasons. I can do this no problem using the function

appendDots: $('.appenddots')

But when I do this the slick-active class only seems to work on the dots appended to the first slide and non of the others work. So if you click to the 2nd / 3rd slide they are missing the relevant <li class="slick-active" from the dots. Any idea why?

Here's a working codepen to check https://codepen.io/alexkodr/pen/YzQOmEj

Answer 1

var activeClass = 'slick-active',
    ariaAttribute = 'aria-hidden';
$( '.block.hero-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 );
    } );
} );

$( '.block.hero-slider' ).slick();

replace .block.hero-sliderclass with your main slider class. it works for me