自動で無限にループする縦スライダー

画像のスライダー

使い途としてはサイドのバナーとか、かなぁ

テキストのスライダー

liの中はテキストでもいけます

  • Lorem ipsum dolor sit amet, consectetur adipisicing
  • Fuga reprehenderit architecto consequuntur
  • Duis aute irure dolor in reprehenderit in voluptate
  • Sit, amet, commodi distinctio eius error quia et quam
  • Excepteur sint occaecat cupidatat non proident
  • Ut enim ad minim veniam, quis nostrud exercitation

<ul class="slideSample2">
	<li>Lorem ipsum dolor sit amet, consectetur adipisicing</li>
	<li>Fuga reprehenderit architecto consequuntur </li>
	<li>Duis aute irure dolor in reprehenderit in voluptate</li>
	<li>Sit, amet, commodi distinctio eius error quia et quam</li>
	<li>Excepteur sint occaecat cupidatat non proident</li>
	<li>Ut enim ad minim veniam, quis nostrud exercitation</li>
</ul>


ul[class^='slideSample'] {
	width: 400px;
	height: 400px; /*ひとつ分少ない高さに*/
	overflow: hidden;
	}
ul[class^='slideSample'] li {
	height:80px;
	padding: 2px;
	text-align: center;
	}
.slideSample2 li {
	width: 394px;
	height: 74px;
	margin: 3px;
	padding: .5rem;
	border: 1px #999 solid;
	background: #d1eefc;
	display: flex;
	align-items: center;
	}


var loop = setInterval(function() {
	var clone = $(".slideSample2 li:first").clone(true);
	$(".slideSample2 li:first").animate({
	marginTop : "-80px"  //バナーの高さが80pxとなっているので,margin-topに-80pxを指定
	}, {
	duration : 4000, //全体の動き（数字を大きくするとゆっくりになる）
	complete : function() {
	    $(".slideSample2 li:first").remove();
		clone.clone(true).insertAfter($(".slideSample2 li:last"));
	}
	});
}, 1500);   //最初に動き出すタイミング（数字を大きくするとゆっくりになる）

TOP