Slick Slider

<style>
.item {
	display: inline-block;
}
 
.list {
 	display:block !important;
}
 
.slick-prev:hover,.slick-prev:focus,.slick-next:hover,.slick-next:focus {
 	outline: none;
}
 
.slick-slide, .slick-slide *{
	outline: none !important; 
}
</style>
 
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
 
 <script>
 
// when document is fully loaded
$( document ).ready(function() {
	$('.list').slick({
  	dots: false,  
    speed: 1000,  
    infinite: false,  
    slidesToShow: 3,  
    slidesToScroll: 1,  
    arrows: false,  
    touchThreshold:300,  
    responsive: [    
    	{
      	// tablet      
      	breakpoint: 991,      
      	settings: {        
        slidesToShow: 2      
       }
     },    
       {      
       	// mobile portrait      
       	breakpoint: 479,      
       	settings: {        
       	slidesToShow: 1      
       	}    
       }  
   ]});
   
	$('.slider-prev').click(function(){
		$(this).closest('.section').find(".list").slick('slickPrev');
	});

	$('.slider-next').click(function(){
		$(this).closest('.section').find(".list").slick('slickNext');
  });
});
</script>