【slick】カルーセルスライダー実装例①

Hanlabo Memberページはこんな感じに実装しています。

<link rel="stylesheet" href="slick.css" type="text/css" />
<link rel="stylesheet" href="slick-theme.css" type="text/css" />

<script type="text/javascript" src="jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="slick.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$(".your-class").slick({
		centerMode: true,
		infinite: true,
		centerPadding: "160px",
		slidesToShow: 3,
		speed: 500,
		responsive: [{
			breakpoint: 768,
			settings: {
				arrows: false,
				centerMode: true,
				centerPadding: "40px",
				slidesToShow: 3
			}
		},
		{
			breakpoint: 480,
			settings: {
				arrows: false,
				centerMode: true,
				centerPadding: "40px",
				slidesToShow: 1
			}
		}]
	});
})
</script>

<div class="content your-class">
	<div><p><img src="hanlabo_no001.png"></p></div>
	<div><p><img src="hanlabo_no002.png"></p></div>
	<div><p><img src="hanlabo_no003.png"></p></div>
	<div><p><img src="hanlabo_no004.png"></p></div>
	<div><p><img src="hanlabo_no005.png"></p></div>
	<div><p><img src="hanlabo_no006.png"></p></div>
	<div><p><img src="hanlabo_no007.png"></p></div>
	<div><p><img src="hanlabo_no008.png"></p></div>
	<div><p><img src="hanlabo_no009.png"></p></div>
</div>