Slick Slider Carousel with Custom Next and Prev Buttons

HTML

<h2>Slick Carousel</h2>
<p>with custom next and previous buttons detached from the slider</p>
<div class='slider-two'>
<div class='slide slide-1'>some stuff</div>
<div class='slide slide-2'>some stuff</div>
<div class='slide slide-3'>some stuff</div>
</div>
<h2>The Buttons</h2>
<button class='slide-prev btn btn-primary me-1'>Previous Slide</button>
<button class='slide-next btn btn-primary'>Next Slide</button>

CSS

.slide {
width:100%;
height:300px;
background:#CCC;
color:#FFF;
text-align:center;
font-size:34px;
font-weight:bold;
padding-top:100px;
}
.slider-one,.slider-two,.slider-three {
margin-bottom:30px;
}
.slide-2 {
background:#EEE;
}
.slide-1 {
background:url(https://kruxor.com/images/pexels-photo-4389409.jpeg) center no-repeat;
background-size:cover;
}
.slide-2 {
background:url(https://kruxor.com/images/server-rack.jpg) center no-repeat;
background-size:cover;
}
.slide-3 {
background:url(https://kruxor.com/images/pexels-photo-709552.jpg) center no-repeat;
background-size:cover;
}

Scripts

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

Javascript

$(document).ready(function(){
// slider two
$('.slider-two').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  fade: true,
  autoplaySpeed: 2000,
  dots: true,
  arrows:true
});
 
	$('.slide-prev').click(function(e){ 
      	//e.preventDefault(); 
		$('.slider-two').slick('slickPrev');
	} );
	
	$('.slide-next').click(function(e){
		//e.preventDefault(); 
		$('.slider-two').slick('slickNext');
	} );  
  
  
});