Multiple dots Slick

init.js

 $('.banners').slick({
    adaptiveHeight: false,
    dots: true,
    arrows: false,
    autoplay: true,
    autoplaySpeed: 6000111,
    infinite: true,
    appendDots: $('.banner .text')
  }).on( 'afterChange', function( event, slick, currentSlide ) {
    $.each(slick.$dots, (i, el) => {
      $(el).find('li').eq(currentSlide).addClass('slick-active').find('button');
    })
  });