今日の人気記事

まだデータがありません。

画像スライドショー「Bare Bones Slider」豊富なオプションで簡単設定!

当ページのリンクには広告が含まれています。

スポンサーリンク

豊富なバリエーションの画像スライドショーがつくれるjQueryプラグイン「Bare Bones Slider」を紹介します。

jQueryプラグイン「Bare Bones Slider」

jQueryプラグイン「Bare Bones Slider」は、スライド方法(オートプレイやクリックで制御)・スライドアクション(スライドやフェイド)をオプションで設定できる画像スライドショープラグインです。

スポンサーリンク

デモでは、「オートプレイ」を紹介しています。

「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>
スポンサーリンク

関連記事(一部広告含む)