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

bxslider：完成版にリンク
jQuery Content Slider | Responsive jQuery Slider | bxSlider：本家サイト
jQueryプラグイン「bxSlider」のいろいろなオプションの使い方のまとめ！｜ Web Design Magazine：参考サイト

★ダウンロードしたcss内の、ファイルのリンク位置を、自分のフォルダの階層や名前と一致させる
★画像はulでリスト化し、ul class="bxslider" と名付ける
f:id:sankoblog:20160404001621p:plain

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>bxslider</title>
<link rel="stylesheet" href="css/bxslider01.css">
<link rel="stylesheet" href="css/jquery.bxslider.css">
<script src="js/jquery-1.12.1.min.js"></script>  <!--順番に気をつける-->
<script src="js/jquery.bxslider.js"></script> <!-- ダウンロードしたjs-->
<script>
$(document).ready(function(){
  $('.bxslider').bxSlider({
  auto: true,
  autoControls: true
});
});
//  参照：http://bxslider.com/
</script>
</head>

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

※自分で書いたcssは、resetのみ使用