CSSチャレンジ１：カルーセルをつくる（HTML、CSS、jQuery）

ライブラリを使わずにHTML、CSS、jQueryのみでカルーセルを作成する。 参考URL：

https://ascii.jp/elem/000/000/481/481241/

• HTML

<div id="carouselWrap">
    <p id="carouselPrev">←</p>
    <p id="carouselNext">→</p>
    <div id="carousel">
        <div id="carouselInner">
            <div id="c1" class="column">
                <a><img src="images/menu-photo0.jpg"></a>
            </div>
            <div id="c2" class="column">
                <a><img src="images/menu-photo1.jpg"></a>
            </div>
            <div id="c3" class="column">
                <a><img src="images/menu-photo2.jpg"></a>
            </div>
        </div>
    </div>
</div>

• CSS

/* カルーセル*/
#carouselWrap{
    margin:100px auto; /* 位置を固定する*/
    width:500px; /* カルーセルの幅 */
    height:135px;
    padding:5px;
    position:relative;
}
#carouselPrev{
    position:absolute;
    top:65px; /* カルーセルの高さの半分。半分の高さに表示。*/
    left:-8px; /* 左寄せ。カルーセルの若干外に。*/
    cursor:pointer;
}
#carouselNext{
    position:absolute;
    top:65px;　/* カルーセルの高さの半分。半分の高さに表示。*/
    right:-8px; /* 右寄せ。カルーセルの若干外に。*/
    cursor:pointer;
}
#carousel{
    width:100%;
    height:100%;
    overflow:hidden; /* carouselInner をマイナスマージンにし、はみ出た部分は非表示にすることでカルーセルにする。 */
}
#carouselInner .column{
    float:left;
}
#carouselInner .column img{
    width: 500px;
    height: 100%;
    border:none;
    overflow:hidden;
}

• jQuery

var next = function() {
    $("#carouselNext,#carouselPrev").hide();
    $("#carouselInner").animate(
        {
            marginLeft : parseInt($("#carouselInner").css("margin-left"))-500+"px"
        },
        "slow",
        "swing", 
        function(){
            $("#carouselInner").css("margin-left","-500px");
            $("#carouselInner .column:first").appendTo("#carouselInner");
            $("#carouselNext,#carouselPrev").show();
        }
    );
};
$(function(){
    //初期設定
    $("#carouselInner").css("width",500*$("#carouselInner .column").length+"px");
    //カルーセル枠の幅をカルーセルの全画像のトータル幅にする。
    $("#carouselInner .column:last").prependTo("#carouselInner");
    // 最後の画像を最初の画像の前に入れる。
    $("#carouselInner").css("margin-left","-500px");
    //カルーセル枠の左マージンを-500にする。つまり最初の画像の前に入れた最後の画像を見れなくする。
　// 6秒に一回カルーセル内コンテンツを変更
    setInterval(next, 6000);

    //戻るボタン
    $("#carouselPrev").click(function(){
        $("#carouselNext,#carouselPrev").hide();
        $("#carouselInner").animate(
            {
                marginLeft : parseInt($("#carouselInner").css("margin-left"))+500+"px"
            },
            "slow",
            "swing", 
            function(){
                $("#carouselInner").css("margin-left","-500px");
                $("#carouselInner .column:last").prependTo("#carouselInner");
                $("#carouselNext,#carouselPrev").show();
            }
        );
    });

    //進むボタン
    $("#carouselNext").click(function(){
         next();
    });
});