簡単実装！シンプルな画像スライダー「Easy Carousel」
当ページのリンクには広告が含まれています。
スポンサーリンク
シンプルな画像スライダーを簡単に実装することができるプラグイン「Easy Carousel」を紹介します。
jQueryプラグイン「Easy Carousel」
このプラグインを使えば、リストタグ（li）で画像を指定するだけで画像スライダーを実装することができます。
あとは好みに合わせて「Easy Carousel」の縦横の幅、アニメーションなどのオプションを設定するだけで、OK！
他にもさまざまな「画像スライダー」がありますが、最も簡単に実装できるプラグインのひとつですね。
スポンサーリンク
デモの画像スライダーをご覧ください。
ソース（ 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
スポンサーリンク