jQuery：プラグイン：Slick - Webデザインのこと、いろいろ

slickの使い方：完成版にリンク
レスポンシブに強いカルーセルスライダーslickの使い方｜Gimmick log：参考サイト

f:id:sankoblog:20160707215515p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>slickの使い方</title>
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/slick-theme.css">
<script src="js/jquery-2.2.1.min.js"></script>
<script src="js/slick.min.js"></script>
<script>
$(function(){
$('.sample').slick({
autoplay:true,
autoplaySpeed:2000,
dots:true,
pauseOnHover:true
});
}); 
</script>
<script>
$(function(){
	$('.single-item').slick();
  });
</script>
</head>

<body>
<ul class="sample">
<li><img src="img/01.png"></li>
<li><img src="img/02.png"></li>
<li><img src="img/03.png"></li>
</ul>
</body>
</html>