【jQuery】ちょっと高機能、でもHTMLはシンプルな画像のスライドギャラリー

今やjQueryのスライドコンテンツ用プラグインは星の数程あります。
今回は「Coda-Slider」というプラグインを使って画像のスライドショーを作ります。
特徴として、jQuery Easing Pluginを使用するので動きがスムーズな点とタブコンテンツを実装できる点があります。

サンプル

こんなんできます。

デモページ

Javascript

3つのJavascriptファイルを使います。

jQuery
jQuery Easing Plugin
Coda-Slider

今回は画像のスライドショーに特化させる為、Coda-Sliderを少し変更したものを使います。

Coda-Slider 変更版

まずは3つのファイルを読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.coda-slider-2.0.js"></script>

設定を書きます。

<script type="text/javascript">
$().ready(function() {
	$('.coda_slider').codaSlider({
		autoSlide: true,
		autoSlideInterval: 3000,
		autoSlideStopWhenClicked: true
	});
});
</script>

HTML

<div class="slider_wrapper">

<ul class="coda_slider">
<li class="panel"><img src="img/01.jpg" width="400" height="200" alt="下筌ダム"></li>
<li class="panel"><img src="img/02.jpg" width="400" height="200" alt="竜門ダム"></li>
<li class="panel"><img src="img/03.jpg" width="400" height="200" alt="石打ダム"></li>
<li class="panel"><img src="img/04.jpg" width="400" height="200" alt="船津ダム"></li>
<li class="panel"><img src="img/05.jpg" width="400" height="200" alt="緑川ダム"></li>
</ul>

</div>
<!-- /slider_wrapper -->

クラス名がcoda_sliderのリスト要素をスライドします。
画像の代替テキストをタブとして上部に表示します。

CSS

/* slider_wrapper */
.slider_wrapper { width:400px; margin:0 auto; }

/* Tab */
.coda-nav ul { display:block; overflow:hidden; clear:both; border-left:1px solid #ccc; }
.coda-nav ul li { display:block; float:left; border-right:1px solid #ccc; }
.coda-nav ul li a { display:block; color:#999; text-decoration:none; padding:3px 7px; }
.coda-nav ul li a.current { color:#fff; background:#ccc; }
.coda-nav ul li a:hover { color:#fff; background:#058dc7; }

/* coda_slider */
.coda_slider,
.coda_slider li { display:block; width:400px; }
.coda_slider { position:relative; overflow:hidden; clear:both; }
.coda_slider li { float:left; }
.coda_slider .panel-container { position:relative }

/* Arrow */
.coda-nav-left,
.coda-nav-right { float:left; margin:5px 5px 0 0; }
.coda-nav-left a,
.coda-nav-right a { display:block; width:100px; color:#fff; text-align:center; text-decoration:none; background:#000; padding:3px 7px; }
.coda-nav-left a:hover,
.coda-nav-right a:hover { background:#058dc7; }

/* Preloader */
.coda_slider p.loading { padding: 20px; text-align:center; }

使いやすい

オプションを設定することにより、タブを消したり、矢印を消したり、自動スライドをON・OFFしたりできます。

カスタマイズ性能が高いので、スライドコンテンツで悩んだら使ってみると良いと思います。