レスポンシブ対応のjQueryスライダーを実装する。

その名も「bxslider」。
シンプルかつ動作もぬるぬるで、レスポンシブ対応の自分的最強プラグイン。

まずは下記の公式サイトから本体をダウンロード。
http://bxslider.com/

落としたら下記のように必要なファイルを読み込む。

<link rel="stylesheet" type="text/css" href="/css/jquery.bxslider.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/js/jquery.bxslider.min.js"></script>

スライダーにしたい画像を用意し、下記のようにdiv要素、もしくはul要素を使いマークアップする。

<ul class="slider">
    <li><img src="/images/img1.jpg" /></li>
    <li><img src="/images/img2.jpg" /></li>
    <li><img src="/images/img3.jpg" /></li>
</ul>

<div class="slider">
    <div><img src="/images/img1.jpg" /></div>
    <div><img src="/images/img1.jpg" /></div>
    <div><img src="/images/img1.jpg" /></div>
</div>

最後にプラグインを実行する。

$(function(){
	$('.slider').bxSlider({
		auto: true,
		speed: 1000,
		pause: 5000,
		captions: true,
	});
});

bxSlider()に渡せる引数は他にもたくさんあるので、詳細は公式サイトを参照されたし。