Как делать слайдер как в примере?

$('.prod_slider').slick({
		autoplay: true,
		infinite: true,
		speed: 300,
		arrows: false,
		cssEase: 'linear',
		slidesToShow: 4,
		slidesToScroll: 1
	});
	
	$('.prev_prod').click(function(){
		$('.prod_slider').slick('slickPrev');
	});
	
	$('.next_prod').click(function(){
		$('.prod_slider').slick('slickNext');
	});	

<div class="slider">
		<div class="center">
			<ul class="prod_slider">
					<li class="prod_circ"><a href="fff"><img src="xxx.png" alt=""  onmouseover="this.src='yyy.png';" onmouseout="this.src='xxx.png';" /></a></li>

					<li class="prod_circ"><a href="fff"><img src="xxx.png" alt=""  onmouseover="this.src='yyy.png';" onmouseout="this.src='xxx.png';" /></a></li>

					<li class="prod_circ"><a href="fff"><img src="xxx.png" alt=""  onmouseover="this.src='yyy.png';" onmouseout="this.src='xxx.png';" /></a></li>

					<li class="prod_circ"><a href="fff"><img src="xxx.png" alt=""  onmouseover="this.src='yyy.png';" onmouseout="this.src='xxx.png';" /></a></li>
							
						</ul>
			<span class="prev_prod"></span><span class="next_prod"></span>
		</div>
	</div>