その名も「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()に渡せる引数は他にもたくさんあるので、詳細は公式サイトを参照されたし。