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

Pyles

I've tried many ways, including cloning and replicating dots on the fly. Nothing. The only suggestion I can give you is this, but it doesn't work properly, try to modify it. Good luck. – Glottic

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

Pictogram