KruXoR WP

.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-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;
}

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

});
</script>

<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>