NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

要素や画像を延々とループスクロールさせることができる「jQuery simplyScroll」

2014年7月18日jQueryプラグイン活用

要素を延々とループスクロールさせることができる「simplyScroll」

「jQuery simplyScroll」は要素や画像を水平方向にループスクロールさせることができます。

垂直方向にループスクロールさせたい場合は、「Cool Carousels」でつくる縦にループスクロールするスライドショーをご覧ください。

デモページ

JavaScript

(function($){
	$(function(){

		$('#loopSlide ul').simplyScroll({
			autoMode: 'loop',
			speed: 1,
			frameRate: 24,
			horizontal: true,
			pauseOnHover:	true,
			pauseOnTouch: true
		});
		
	});	
})(jQuery);

HTML

<div id="loopSlide">
	<ul>
		<li><img src="img01.jpg" /></li>
		<li><img src="img02.jpg" /></li>
		<li><img src="img03.jpg" /></li>
		<li><img src="img04.jpg" /></li>
		<li><img src="img05.jpg" /></li>
	</ul>
</div>

CSS

.simply-scroll-container { 
	position: relative;
}
.simply-scroll-clip { 
	position: relative;
	overflow: hidden;
}
.simply-scroll-list { 
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.simply-scroll-list li {
	float: left; /* Horizontal scroll only */
	padding: 0;
	margin: 0;
	width: 481px;
	height: 319px;
}
.simply-scroll-list li img {
	display: block;
}

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. 要素や画像を延々とループスクロールさせることができる「jQuery simplyScroll」

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com