今日の人気記事

  1. マウスオーバーで画像を拡大(ズーム)「EasyZoom」
  2. ExcelのようにTableが編集できちゃう「Handsontable」
  3. 画像の拡大・縮小と移動(パン)「pan and zoom 」
  4. 画像スライドショー「Bare Bones Slider」豊富なオプションで簡単設定!
  5. 指定した数値から折れ線グラフを描画「SimpleChart」

簡単実装!シンプルな画像スライダー「Easy Carousel」

スポンサーリンク

シンプルな画像スライダーを簡単に実装することができるプラグイン「Easy Carousel」を紹介します。

jQueryプラグイン「Easy Carousel」

このプラグインを使えば、リストタグ(li)で画像を指定するだけで画像スライダーを実装することができます。

あとは好みに合わせて「Easy Carousel」の縦横の幅、アニメーションなどのオプションを設定するだけで、OK!

他にもさまざまな「画像スライダー」がありますが、最も簡単に実装できるプラグインのひとつですね。

スポンサーリンク

デモの画像スライダーをご覧ください。

「Easy Carousel」のデモ

ソース( HTML + jQuery )


<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="Easy Carouselのデモでーす。">
<title>Easy Carousel - jQueryプラグイン</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="easyCarousel-min.js"></script>
<script>
$(document).ready(function() {  
  $("#myC").easyCarousel({
    height: 600,
    width: 800,
    autoScroll: true,
    slideDuration: 3000,
    photoFrame: true
  });
});
</script>
<style>
#main {
  margin:0 auto;
  width: 800px;
}
</style>
</head>
<body>
<h1>Easy Carousel のデモでーす。</h1>
<div id="main">
<ul id="myC">
  <li><a href="#" title="赤だよ〜。"><img src="images/red.png"></a></li>
  <li><a href="#" title="橙だよ〜。"><img src="images/orange.png"></a></li>
  <li><a href="#" title="黄だよ〜。"><img src="images/yellow.png"></a></li>
  <li><a href="#" title="緑だよ〜。"><img src="images/green.png"></a></li>
  <li><a href="#" title="青だよ〜。"><img src="images/blue.png"></a></li>
  <li><a href="#" title="藍だよ〜。"><img src="images/indigo.png"></a></li>
  <li><a href="#" title="紫だよ〜。"><img src="images/purple.png"></a></li>
</ul>
</div>
</body>
</html>

jsファイルのダウンロード、その他のオプション詳細はこちらからどうぞ。
» Easy Carousel

スポンサーリンク

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