jsでスライドショーをさせるなら【coda-slider-2.0】

お久しぶりです。コンワンワ。

ずーっとAS3の勉強していたのに、iphoneやらipadやらの問題で下火になりつつあるFLASH・・・
寂しい限りです。

FLASHの代わりに勢いの出てきたjavascript、今までなら迷わずFLASHを使っていたトップページのスライドショーなども素敵なライブラリが見事にこなしてしまいます。

僕が注目したのは「coda-slider-2.0」。

サンプルを見ていただければわかるとおり、ヒジョーに素敵な動きをします。

毎度のことながら特に僕が語る必要もないのですが、せっかくエントリーを書くのに何もしないのでは面白くありませんよね。

そこで、便利な使い方が色々できる「coda-slider-2.0」の機能の一部をあえて外し、トップページのスライドショーに使うためだけに改造してみました。

→69カスタマイズサンプル

いつものようにjsファイルを読み込みます。
jquery-1.3.2.min.js //jquery本体
jquery.easing.1.3.js //イージングライブラリ(?)
jquery.coda-slider-2.0.js //coda-slider-2.0
coda-slider-69.css //カスタマイズしたスタイルシート

そして本体のコード

<script type="text/javascript">
	 $().ready(function() {
	 $('#coda-slider').codaSlider({
	 dynamicArrows: false,
	 dynamicTabs: false,
	 autoSlide: true,
	 autoSlideInterval: 5000,
	 autoSlideStopWhenClicked: true
	 });
 });
</script>

<div class="coda-slider-wrapper">
    <div class="coda-slider preload" id="coda-slider">
        <div class="panel">
	    <p><a href="#"><img /></a></p>
        </div>
        <div class="panel">
       	    <p><a href="#"><img /></a></p>
        </div>
        <div class="panel">
            <p><a href="#"><img /></a></p>
        </div>
        <div class="panel">
            <p><a href="#"><img /></a></p>
        </div>
    </div><!-- .coda-slider -->	
    <div id="coda-nav-1" class="coda-nav">
        <ul>
            <li class="tab1"><a href="#1">パネル1</a></li>
	    <li class="tab2"><a href="#2">パネル2</a></li>
	    <li class="tab3"><a href="#3">パネル3</a></li>
	    <li class="tab4"><a href="#4">パネル4</a></li>
        </ul>
    </div>	
</div>

#coda-sliderは任意の名前ですよ。
わかると思いますが<img />の部分は表記を省略してあります。
今回、画像のサイズは900px/300pxにしてありますが、もちろん他のサイズでもちゃんと動きます（CSSは調整してください）

いかがでしょうか？
まぁ、普通にコーディングされている方なら特にこんなエントリー見なくてもできると思いますが（汗

今回カスタマイズしたCSSファイルはこちら

※当然のことながら、このプログラムを使ったことによって体の一部がカッチカチになったとしても責任は持ちませんのでご了承ください！！

このカテゴリーの最新エントリー