無限ループさせるスライダーを実装する

こんにちは、ウェブラボ技術メモです。
今回はコンテンツ要素を無限ループさせるスライダーを実装してみたいと思います。

まずはどのようなスライダーなのか、作成したDEMOをご覧ください。

横並びになっている5個の画像が自動でスライドしているのがわかりますね。

実装にあたってこちらの紹介ページを参考にさせていただきました。

http://black-flag.net/jquery/20110707-3305.html

それでは実装まで解説していきます。

まずはhead内でjquery本体と動作に必要なCSSを読み込ませ、

動作させるためのスクリプトを記述します。
■スクリプト

<link rel="stylesheet" href="../common/css/common.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
    $('#loopslider').each(function(){
        var loopsliderWidth = $(this).width();
        var loopsliderHeight = $(this).height();
        $(this).children('ul').wrapAll('<div id="loopslider_wrap"></div>');

        var listWidth = $('#loopslider_wrap').children('ul').children('li').width();
        var listCount = $('#loopslider_wrap').children('ul').children('li').length;

        var loopWidth = (listWidth)*(listCount);

        $('#loopslider_wrap').css({
            top: '0',
            left: '0',
            width: ((loopWidth) * 2),
            height: (loopsliderHeight),
            overflow: 'hidden',
            position: 'absolute'
        });

        $('#loopslider_wrap ul').css({
            width: (loopWidth)
        });
        loopsliderPosition();

        function loopsliderPosition(){
            $('#loopslider_wrap').css({left:'0'});
            $('#loopslider_wrap').stop().animate({left:'-' + (loopWidth) + 'px'},25000,'linear');
            setTimeout(function(){
                loopsliderPosition();
            },25000);
        };

        $('#loopslider_wrap ul').clone().appendTo('#loopslider_wrap');
    });
});
</script>

次にスライダーさせるコンテンツ要素をHTMLに記述します。

■HTML

<div id="loopslider01">
		<ul>
			<li><img src="img/1.jpg" width="320" height="213" alt="" /></li>
			<li><img src="img/2.jpg" width="320" height="213" alt="" /></li>
			<li><img src="img/3.jpg" width="320" height="213" alt="" /></li>
			<li><img src="img/4.jpg" width="320" height="213" alt="" /></li>
			<li><img src="img/5.jpg" width="320" height="213" alt="" /></li>
		</ul>
	</div>

最後にHTMLに対応したCSSを記述します。

■CSS

/* loopslider */
#loopslider {
    margin: 0 auto;
    width: 100%;
    height: 213px;
    text-align: left;
    position: relative;
    overflow: hidden;
}

#loopslider ul {
    height: 213px;
    float: left;
    display: inline;
    overflow: hidden;
}

#loopslider ul li {
    width: 320px;
    height: 213px;
    float: left;
    display: inline;
    overflow: hidden;
}

/* =======================================
    ClearFixElements
======================================= */
#loopslider ul:after {
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}

#loopslider ul {
    display: inline-block;
    overflow: hidden;
}

スライダーの速度設定は、「function loopsliderPosition()」の中にある

2つの「25000」の値を変更させることで調節できます。
この値は「＜ul＞」の要素全体が、「#loopslider」の端から端まで、何ミリ秒で移動するかを意味しています。
そのため、スライドさせるコンテンツ要素の横幅が大きいほど、早くスライドします。

今回は自動で一方向に流れる無限ループスライダーを紹介いたしましたが

スクリプト部分やCSS部分の記述を変更・追加することで、
以下のような動作を実装することができます。

• コンテンツ要素にマウスオーバーするとスライダーがストップする
• スライダーの左右に設置したボタンでスライドの向きを変化させる

これらの動作については、今回ご紹介させていただいたブログの下記ページにて紹介されています。

http://black-flag.net/jquery/20111214-3623.html

以上、技術メモでした。