レスポンシブな画像ギャラリーのjQueryスライダー：bxSlider

画像スライダーをWEBに組み込みが、レスポンシブにも対応したい。
それなら、レスポンシブ対応の画像スライダーを使おう

bxSlider
http://bxslider.com/
bxSlider 4.1.1のライセンスはWTFPLです。
超積極的なPublicDomainみたいな感じ。

組み込みは簡単。

「ヘッダ部分」
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />


「body内のスライダー部分」
<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

「起動部分」　※headでもbodyでもOKなはず。
<script>
$(document).ready(function(){
  $('.bxslider').bxSlider();
});
<script>


オプションもいろいろあるので試して見て下さい。
http://bxslider.com/options

設定は下記のような感じです。
<script>
$('.bxslider').bxSlider({
  auto: true,
  autoControls: true
});
<script>