ネットアンサー55備忘録

レスポンシブ対応スライダーslick
パラメーターまとめ
公式サイト　デモ
イベント機能（コールバック）

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

$(function(){
	$('.slider').slick({
	  infinite: true,
	  slidesToShow: 2,
	  slidesToScroll: 1,
	  centerMode: true,
	  centerPadding: '0px',
	  dots: true
	});
}); 

☆総量の1320pxの計算の仕方 （画像横幅+画像のpadding-left・padding-right)×２カラム 画像のpadding-left・padding-rightは下記cssでは.slick-slide imgの箇所

body{
	background:#CCC;
}
.wrap{
	width:1320px;/*padding-left,rightと画像幅の総量*/
	margin:30px auto;
}
.slick-slide{
	text-align:center;
}
.slick-slide img {
	padding: 0 10px;
	display:inline;
}

	<div class="wrap">
	<div class="slider">
		<div><img src="img/001.jpg" alt=""></div>
		<div><img src="img/002.jpg" alt=""></div>
		<div><img src="img/006.jpg" alt=""></div>
		<div><img src="img/003.jpg" alt=""></div>
		<div><img src="img/004.jpg" alt=""></div>
		<div><img src="img/005.jpg" alt=""></div>
	</div>
	</div>

demo1
demo2(サムネイル付き)
demo3(サムネイル付き・レスポンシブ)
demo4(サムネイル・レスポンシブ画像ガジリなし)
demo5(サムネイル・文字入れ)
demo6(サムネイル・文字入れ)、センターの時だけ文字が現れる