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

2016.11.25　Posted by Coding_team

Webプログラミング

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

まずはどのようなスライダーなのか、作成した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>

$(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>

<ul>

</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;
}

/* 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部分の記述を変更・追加することで、
以下のような動作を実装することができます。