画像を無限ループさせる「ループスライダー」

病院のホームページ制作に携わった際に使用したループスライダーの実装方法をメモ。
個々の画像をじっくりと見てもらうというようりは、色々なサービスを展開してる場合に、まずは一通り見せて、興味を引きたい時などに便利です。

「ループスライダー」の実装方法

ループスライダーの実装には「jQuery」を利用。
まずは外部ファイルを使用するサイトの「head」タグ内にコードを記載。
その後、以下のソースコードで実装。
jQueryの設置方法は下記サイトで確認。

• jquery

HTML

.loopSlider　スライダーの表示枠（動かない枠部分）
.loopslider_wrap　スライダーの可動枠

<div class="loopSlider">
<div class="loopslider_wrap">
<ul>
<li><img src="○○○○" width="100%"></li>
<li><img src="○○○○" width="100%"></li>
<li><img src="○○○○" width="100%"></li>
<li><img src="○○○○" width="100%"></li>
<li><img src="○○○○" width="100%"></li>
<li><img src="○○○○" width="100%"></li>
</ul>
</div>
</div>
<script>
$(function(){
	loopTopSlider();
	loopsliderPosition();
});
</script>

CSS

基本的に「 表示枠 < 可動枠 」なので「overflow: hidden;」で見えては困る部分を見えなくする。
また、「position」プロパティを使うため、枠の高さも設定。

.loopSlider{
	height: 230px;
	overflow: hidden;
	position: relative;
}
.loopSlider .loopslider_wrap{
	height: 230px;
	display: -webkit-flex;
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
}
.loopSlider .loopslider_wrap ul{
	display: -webkit-flex;
	display: flex;
}
.loopSlider .loopslider_wrap ul li{
	width: 324px;
}

jQuery

スライダー画像の全体幅を「sliderSize」として取得してから、取得値を2倍したものをスライダーの可動枠の幅に設定。
「clone」関数でスライダー画像を複製して、スライダー画像の末尾に追加。
60000秒かけて稼働枠を左端から、左方向に移動させていき、複製部分の左端が左端に到達した時点(60000秒 ) で、左端 ( 0 )の位置に戻す。
あとはこの動作を「setTimeout」関数で60000秒ごとに繰り返す。
見た目はループしているように見えますが、実際は複製した画像が左端で重なるようにして、入れ替えています。

function loopTopSlider(){
	var sliderSize = $('.loopSlider .loopslider_wrap ul').width();
	$('.loopSlider .loopslider_wrap').css({'width':sliderSize*2+'px'});
	$('.loopSlider .loopslider_wrap').find('ul').clone().appendTo('.loopSlider .loopslider_wrap');
};
function loopsliderPosition(){
	var sliderSize = $('.loopSlider .loopslider_wrap ul:first-of-type').width();
	$('.loopslider_wrap').css({left:'0'});
	$('.loopslider_wrap').stop().animate({left:'-'+(sliderSize)+'px'},60000,'linear');
	setTimeout(function(){
		loopsliderPosition();
	},60000);
};