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

jQueryで要素を指定する際、IDやクラス以外で選択したい場合に便利。

data属性は下記の通り、ハイフン以降に任意の文字列を設定することで利用できる。

<div data-hoge="huga">piyo</div>

例えば上記の「data-hoge」属性にアクセスしたい場合は下記の記述でアクセスが可能。

$('div').data('hoge');

また以下のように、data属性に対しオブジェクトを代入することで複数の値を一度に管理できる。

<div data-info='{"my":"banana","favorite":"apple","fruit":"orange"}'>自己紹介</div>

アクセスする際は下記の通り。

$('div').data('info').my;
$('div').data('info').favorite;
$('div').data('info').fruit;

そして最後にjQuery側からdata属性を設定する方法。
これは普通にattr()関数を用いて設定すればよい。

$('div').attr({
    'data-hoge': 'huga',
    'data-info': '{"my":"banana","favorite":"apple","fruit":"orange"}'
});

メモ。

$.type()関数を用いる。

var obj = {};
var res = $.type(obj);
console.log(res);
↓
// object

今回はオブジェクトの型判別に利用したが、他にもstring、number、boolean、arrayといった型の判別が可能。