jQuery スライダー jCarousel

Tweet

Share on Tumblr

jQuery スライダー jCarousel | Bamboo lath 日々の記録スライダーをそのうちつける可能性があるので予習。

jCarousel

これがよさそう。

とりあえず自分の手持ちの写真で試してみる。

こんな感じ

画像がでかいとかは気にしない。
CSSの修正とかできてない・・・。

設置方法は
jCarousel内のDownloadで落としてきて解凍して読み込ませる。

HTMLはこんな感じ

        <div id="wrap">
            <h1>jCarousel</h1>

            <h3>サンプル</h3>

            <ul id="mycarousel" class="jcarousel-skin-tango">
                <li><img src="./photo/IMG_1116.JPG" width="75" alt="" /></li>
                <li><img src="./photo/IMG_1166.JPG" width="75"  alt="" /></li>
                <li><img src="./photo/IMG_1167.JPG" width="75"  alt="" /></li>
                <li><img src="./photo/IMG_1202.JPG" width="75"  alt="" /></li>
                <li><img src="./photo/IMG_1270.JPG" width="75"  alt="" /></li>
                <li><img src="./photo/IMG_1448.JPG" width="75"  alt="" /></li>
            </ul>

        </div>

実際に書くjsは以下

            jQuery(document).ready(function() {
                    jQuery('#mycarousel').jcarousel();
                });

jCarouselを見るとほかにもいろいろとサンプルがあるので実際の業務
に取り入れるかも。

CSSさえ素敵に調整できれば・・・。
いまだにCSSが苦手なのでちゃんと取り組まなければ。