くるくる回る画像ギャラリー「Rondell」
当ページのリンクには広告が含まれています。
スポンサーリンク
くるくる回る画像ギャラリーを実装するプラグイン「Rondell」を紹介します。
jQueryプラグイン「Rondell」
このプラグインを使えば、奥行きをもったくるくる回る画像ギャラリーを簡単に作成することができます。
しかも、オプションで通常の画像スライダーやサムネイルを並べた画像ギャラリーなどなど……。ひとつのプラグインで多彩な画像ギャラリーを作成することができます。
スポンサーリンク
デモでは、くるくる回る画像ギャラリーを紹介しています。一定時間が経過すると画像がくるくる回ります。また、画像（あるいは「next」「prev」）をクリックすると手動で画像を回すことができます。実際の動きを体感してみてください。
ソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Rondell のデモでーす。">
<title>Rondell - jQuery Plugin Demo</title>
<link rel="stylesheet" href="css/jquery.rondell.css" type="text/css" media="all" title="Screen">
</head>
<body>
<p><a href="https://webkaru.net/jquery-plugin/rondell/">「jQueryプラグインまとめ」に戻る</a></p>
<h1>Rondellのデモでーす。</h1>
<div id="rondellCarousel" class="hidden">
<a href="images/red.png">
<img src="images/red_thumb.png">
<h5>赤</h5>
<p>赤だよ〜。</p>
</a>
<a href="images/orange.png">
<img src="images/orange_thumb.png">
<h5>橙</h5>
<p>橙だよ〜。</p>
</a>
<a href="images/yellow.png">
<img src="images/yellow_thumb.png">
<h5>黄</h5>
<p>黄だよ〜。</p>
</a>
<a href="images/green.png">
<img src="images/green_thumb.png">
<h5>緑</h5>
<p>緑だよ〜。</p>
</a>
<a href="images/blue.png">
<img src="images/blue_thumb.png">
<h5>青</h5>
<p>青だよ〜。</p>
</a>
<a href="images/indigo.png">
<img src="images/indigo_thumb.png">
<h5>藍</h5>
<p>藍だよ〜。</p>
</a>
<a href="images/purple.png">
<img src="images/purple_thumb.png">
<h5>紫</h5>
<p>紫だよ〜。</p>
</a>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.rondell.js"></script>
<script type="text/javascript">
$(function() {
// Create a rondell with the 'carousel' preset and set an option
// to disable the rondell while the lightbox is displayed
$("#rondellCarousel").rondell({
preset: "carousel",
});
});
</script>
</body>
</html>
スポンサーリンク