【jQuery】ちょっと高機能、でもHTMLはシンプルな画像のスライドギャラリー
- 2012年03月21日
- Javascript, プログラミング
- jQuery, スライドショー, ダム
今やjQueryのスライドコンテンツ用プラグインは星の数程あります。
今回は「Coda-Slider」というプラグインを使って画像のスライドショーを作ります。
特徴として、jQuery Easing Pluginを使用するので動きがスムーズな点とタブコンテンツを実装できる点があります。
サンプル
こんなんできます。
Javascript
3つのJavascriptファイルを使います。
jQuery
jQuery Easing Plugin
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したりできます。
カスタマイズ性能が高いので、スライドコンテンツで悩んだら使ってみると良いと思います。
コメントを残す