Как изменить стрелки slick?

$(document).ready(function(){


 $(function carouselSetup() {
   
   var $componentCarousel = $('.menu-content1'),
     $items = $componentCarousel.find('.carousel-item');
        

   
   var $slick = $componentCarousel.slick({
       infinite: false,
       speed: 500,
       draggable: true,
       slidesToShow: 3,
       slidesToScroll: 3,
       prevArrow: '<button type="button" class="slick-prev">prev</button>',
       nextArrow: '<button type="button" class="slick-next">next</button>'
     });


   var $prevButton = $slick.find('.slick-prev');
   var $nextButton = $slick.find('.slick-next');



   $slick.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
   	console.clear();
   	console.log('it works');

     //console.log(nextSlide);
   	/*

     if (nextSlide === 0) {
       $prevButton.hide();
     }
     if (nextSlide === slick.slideCount - 1) {
       $nextButton.hide();
     }
     if (currentSlide === 0) {
       $prevButton.show();
     }
     if (currentSlide === slick.slideCount - 1) {
       $nextButton.show();
     }
   });*/
$slick.on('afterChange', function(event, slick, currentSlide, nextSlide) {
	console.log(currentSlide);
	if (currentSlide < 9){
		$nextButton.hide();
		$prevButton.show();
	}
	if ((currentSlide > 0) && (currentSlide < 9)){
		$nextButton.show();
		$prevButton.hide();
	}
});

	
});
});
});