今日の人気記事

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

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

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

スポンサーリンク

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

jQueryプラグイン「Easy Carousel」

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

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

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

スポンサーリンク

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

「Easy Carousel」のデモ

ソース（ HTML + jQuery ）

ソースを表示
印刷SyntaxHighlighterについて
<!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

スポンサーリンク

関連記事（一部広告含む）