Как удалить класс .m-active после прокрутки всех слайдов на слайдере?

jQuery(document).ready(function($) {
$(function(){
  var speed = 2000,
      $li;
  
  $('.slider-wrapper').on('init', function(slick) {
        
    $li = $(slick.target).find('.slider-wrapper .new-dots li');
    animateSpan(0, $li);
  });

   $('.slider').on('init', function(e, slick) {
        $('.new-dots li').eq(slick.currentSlide).addClass('m-active');
    }).slick({
        dots: false,
        autoplay: true,
        autoplaySpeed: speed,
        arrows: false,
        slidesToShow: 1,
    }).on('beforeChange', function(e, slick, currentSlide, nextSlide) {
        $('.new-dots li').eq(nextSlide).addClass('m-active');
    });
    
    $('.new-dots').on('beforeChange', function(e, slick, currentSlide){
        if (currentSlide == 1) { 
             $('.new-dots li').removeClass('m-active');
        }
    });
    
    $('.new-dots').on('click', 'li', function() {
        $('.slider').slick('slickGoTo', $(this).index());
    });
    

  
  function animateSpan(currentSlide, $li) {
    var $currentBtn = $li.eq(currentSlide).find('span');
    
  }
})
});

.new-dots {
    justify-content: space-between;
    padding: 0px 4px 0 4px;
    display: flex;
    list-style: none;
    left: -19px;
    position: relative;
    width: 93%;
    margin-top: 32px;
}
.m-active {
color: red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet"/>

<div class="slider-wrapper">
        <ul class="slider">
          <li>
            <div class="inside-div">
              <span class="count-span">1</span>
              <h3 class="slider-ttl">Особая технология рубки</h3>
              <p>Используем уникальную методику рубки, которую мы называем "рубка в ноль". Благодаря данной технологии исключается возможность возникновения щелей, что способствует поддержанию температуры внутри дома.</p>
            </div>
          </li>
          <li class="slider__item">2</li>
          <li class="slider__item">3</li>
        </ul>
        <ul class="new-dots">
          <li><button><span></span></button><div>Особая технология рубки</div></li>
          <li><button><span></span></button><div>Особая технология рубки</div></li>
          <li><button><span></span></button><div>Особая технология рубки</div></li>
        </ul>

      </div>
 
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>