Estoy tratando de hacer un control deslizante ingenioso con flechas siguiente y anterior, información de paginación y un interruptor para reproducción automática. Tengo todo funcionando excepto si ha seleccionado la reproducción automática y luego hace clic en la flecha anterior, la alternancia de reproducción automática ahora ya no funciona.

Aquí está mi js hasta ahora:

 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') } });

Aquí está el control deslizante hasta ahora: https://codepen.io/wjgoodman/pen/GRMEvpQ

¿Alguien sabe cómo integrar mejor la palanca para que funcione después de hacer clic en una flecha anterior o siguiente?