画像スライドショー「Bare Bones Slider」豊富なオプションで簡単設定！
当ページのリンクには広告が含まれています。
スポンサーリンク
豊富なバリエーションの画像スライドショーがつくれるjQueryプラグイン「Bare Bones Slider」を紹介します。
jQueryプラグイン「Bare Bones Slider」
jQueryプラグイン「Bare Bones Slider」は、スライド方法（オートプレイやクリックで制御）・スライドアクション（スライドやフェイド）をオプションで設定できる画像スライドショープラグインです。
スポンサーリンク
デモでは、「オートプレイ」を紹介しています。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>BB Slider - jQueryプラグインまとめのカルマ</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link type="text/css" href="css/jquery.bbslider.css" rel="stylesheet" media="screen" width="507" height="338" />
<style>
.bbslider-wrapper {
width:507px;
}
</style>
<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.bbslider.min.js"></script>
</head>
<body>
<h1>BB Sliderのデモでーす。</h1>
<div id="auto">
<div><img src="img/img1.gif" width="507" height="338" /></div>
<div><img src="img/img2.gif" width="507" height="338" /></div>
<div><img src="img/img3.gif" width="507" height="338" /></div>
<div><img src="img/img4.gif" width="507" height="338" /></div>
<div><img src="img/img5.gif" width="507" height="338" /></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#auto').bbslider({
auto: true,
timer:3000,
loop:true
});
});
</script>
<div xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/" about="http://www.bbslider.com/download.php"><span property="dct:title">Bare Bones Slider</span> (<a rel="cc:attributionURL" property="cc:attributionName" href="http://www.bbslider.com">Richard Hung</a>) / <a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/">CC BY-NC 3.0</a></div>
</body>
</html>
スポンサーリンク