I am trying to make a slick slider with next and previous arrows, paging info and a toggle for autoplay. I have everything working except if you have selected autoplay and then click the previous arrow, the autoplay toggle now longer works.

Here is my js so far:

var $status = $('.pagingInfo');
var $slickElement = $('.slideshow');

$slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
 
  if(!slick.$dots){
    return;
  }

  var i = (currentSlide ? currentSlide : 0) + 1;
  $status.text(i + ' of ' + (slick.$dots[0].children.length));
});

$slickElement.slick({
    infinite: false,
    slidesToShow: 1,
  autoplay: false,
    autoplaySpeed: 1000,
    speed: 300,
  dots: true,
            pauseOnFocus: false, 

    prevArrow: $('.prev'),
      nextArrow: $('.next'),
});

$('#toggle1').click( function() {
  if ($(this).html() == 'pause'){
    $slickElement.slick('slickPause')
     $(this).html('play') 
  } else {
    $slickElement.slick('slickPlay')  
    $(this).html('pause') 
  }  
});

Here is the slider so far: https://codepen.io/wjgoodman/pen/GRMEvpQ

Does anyone know how to better integrate the toggle so the toggle works after clicking a next or previous arrow?