レスポンシブ対応のスライドショー
<!DOCTYPE html>
<head>
<title>FlexSlider 2</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<link rel="stylesheet" href="boot/css/flexslider.css" type="text/css" media="screen" />
<script src="boot/js/modernizr.js"></script>
<style type="text/css">
body{background:#000000;}
.flexslider{background:#000000;}
</style>
</head>
<body>
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li data-thumb="サムネ画像.jpg"><a href="#"><img src="boot/images/画像.jpg" /></a></li>
<li data-thumb="サムネ画像.jpg"><a href="#"><img src="boot/images/画像.jpg" /></a></li>
<li data-thumb="サムネ画像.jpg"><a href="#"><img src="boot/images/画像.jpg" /></a></li>
</ul>
</div>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script defer src="boot/js/jquery.flexslider.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "fade",
controlNav:"thumbnails",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
<script src="boot/js/jquery.easing.js"></script>
<script src="boot/js/jquery.mousewheel.js"></script>
</body>
</html>
勉強させてもらったサイト
詳しい設定方法
サムネイルを表示させる方法