スライドショーjqueryプラグインloopItの使い方

このスライドショーのjqueryプラグインは、ナビゲーション機能もなくただ無限にスライドするシンプルなレスポンシブル対応のプラグインです。

「jQuery Easing Plugin」を利用することにより、イージングの種類が沢山増えます。

1.デモ

デモを作成しましたのでよろしかったら、ここをクリック

2.ダウンロード

公式ページに行って、ダウンロードしてください。ダウンロード完了し解凍すると「loopit-master」フォルダーができます。
「jQuery Easing Plugin」は、こちらでダウンロードできます。

3.必要なファイル

jsフォルダーの「loopit.js」を自分のフォルダーにコピーします。

4.CSSの編集


img {
	max-width:	100%;
}
.slider {
	width:		100%;
	position:	relative;
	overflow:	hidden;
}

5.HTMLの編集

headタグ内で、作成したcssファイルとjqueryファイルを読み込み、初期化します。


<link rel="stylesheet" href="./css/style.css" media="all" type="text/css" />
<script type="text/javascript" src="./js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="./js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="./js/loopit.js"></script>

<script>
	$(document).ready(function() {
		$(".slide-1").loopItNow({
			vertical: false,
			effect: '',
			speed: 3000,
		});
	});
</script>
</head>

「jquery.easing.js」を読み込むことにより、イージングの種類が増えますが、読み込まなくても実行できます。「slide-1」はcssに記述する必要はありません。

bodyタグ内で、画像を追加していきます。


	<div class="slider">
		<div class="slide-1"><img src="./images/s001.jpg"/></div>
		<div class="slide-1"><img src="./images/s002.jpg"/></div>
		<div class="slide-1"><img src="./images/s003.jpg"/></div>
		<div class="slide-1"><img src="./images/s004.jpg"/></div>
	</div>

6.オプションの説明

オプション	初期値	説明
vertical	false	trueで垂直に画像切り替え、falseで水平に画像切り替え
effect	''	イージングの種類「jQuery Easing Plugin」を読み込んだ時に使用可能
speed	3000ms	画像切り替えの間隔
captionTop	false	trueで画像上部にテキスト表示
captionBottom	false	trueで画像下部にテキスト表示このオプションを有効にするには、captionTopをtrueにする必要あり