ダウンロード
http://www.kyrielles.net/sliderkit/sliderkit_en.html
デモ
http://www.kyrielles.net/sliderkit/demos/photos-galleries.html
特徴
* タグ構造や部品単位でclass属性が決まっているので不用意に変更できない
* WebKit系ブラウザとの互換性を取るため、$(function(){...}); ではなく、『 $(window).load(function(){...}};』にしている
* Chromeでは、キーボード操作ができない模様。
* タブとかも作れる模様。
サンプル
<html>
<head>
<!-- jQuery library -->
<script type="text/javascript" src="../lib/js/jquery/_oldies/jquery-1.3.min.js"></script>
<!--<script type="text/javascript" src="../lib/js/jquery/jquery-1.6.2.min.js"></script>-->
<!-- jQuery Plugin scripts -->
<script type="text/javascript" src="../lib/js/jquery/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="../lib/js/jquery/jquery.mousewheel.min.js"></script>
<!-- Slider Kit scripts -->
<script type="text/javascript" src="../lib/js/sliderkit/jquery.sliderkit.1.8.min.js"></script>
<script type="text/javascript" src="../lib/js/sliderkit/addons/sliderkit.delaycaptions.min.js"></script>
<script type="text/javascript" src="../lib/js/sliderkit/addons/sliderkit.counter.min.js"></script>
<script type="text/javascript" src="../lib/js/sliderkit/addons/sliderkit.timer.min.js"></script>
<!-- Slider Kit launch -->
<script type="text/javascript">
$(window).load(function(){
// Photo gallery > Standard
$("#standardPhotosgallery").sliderkit({
mousewheel:true,
shownavitems:4,
//navfx:"none",
panelbtnshover:true,
auto:false,
circular:true,
navscrollatend:true,
counter:true
});
});
</script>
<!-- Slider Kit styles -->
<link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-core.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-demos.css" media="screen, projection" />
<!-- Slider Kit compatibility -->
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-demos-ie6.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-demos-ie7.css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-demos-ie8.css" /><![endif]-->
<!-- Site styles -->
<link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-site.css" media="screen, projection" />
</head>
<body>
<div id="standardPhotosgallery" class="sliderkit photosgallery-std">
<div class="sliderkit-nav">
<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev"><a rel="nofollow" href="#" title="Previous line"><span>Previous line</span></a></div>
<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next"><a rel="nofollow" href="#" title="Next line"><span>Next line</span></a></div>
<div class="sliderkit-nav-clip">
<ul>
<li><a href="#" rel="nofollow" title="[link title]"><img src="../lib/images/photos/mini/sample-01.jpg" alt="[Alternative text]" /></a></li>
<!-- 略 -->
<li><a href="#" rel="nofollow" title="[link title]"><img src="../lib/images/photos/mini/sample-10.jpg" alt="[Alternative text]" /></a></li>
</ul>
</div>
</div>
<div class="sliderkit-panels">
<div class="sliderkit-btn sliderkit-go-btn sliderkit-go-prev"><a rel="nofollow" href="#" title="Previous"><span>Previous</span></a></div>
<div class="sliderkit-btn sliderkit-go-btn sliderkit-go-next"><a rel="nofollow" href="#" title="Next"><span>Next</span></a></div>
<div class="sliderkit-count sliderkit-count-items">
<span class="sliderkit-count-current"></span><span class="sliderkit-count-sep">/</span><span class="sliderkit-count-total"></span>
</div>
<div class="sliderkit-panel">
<img src="../lib/images/photos/sample-01.jpg" alt="[Alternative text]" />
</div>
<!-- 略 -->
<div class="sliderkit-panel">
<img src="../lib/images/photos/sample-10.jpg" alt="[Alternative text]" />
</div>
</div>
</div>
</body>
</html>
参考文献
http://tokkono.cute.coocan.jp/blog/slow/index.php/wordpress/ipad-themed-image-slider-with-jquery/
