jqueryプラグインコンテンツスライダー myContentSliderの使い方

軽量でレスポンシブ対応のコンテンツスライダーmyContentSliderを紹介したいと思います。このjqueryプラグインは、画像をスライド表示させるのではなく、背景画像の上にテキストをスライドさせます。画像のスライドの後にテキストをスライドさせるプラグインもありますが、テキストだけというのも良いかなと思います。

1.デモ

デモを作成しましたのでよろしかったら、ここをクリックしてください。

2.ダウンロード

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

3.必要なファイル

以下のファイルをを自分のフォルダーにコピーします。 slider.js

4.HTMLの編集

headタグ内で、jquery.jsを読み込みます。


<script src="./js/jquery-1.12.0.min.js" ></script>

</head>

bodyタグ内で、スライドさせるテキストを追加します。一番最初の「li」には「class="active"」を指定してください。「data-duration="3000"」で直接スライド時間を設定することもできます。


<div id="my-contents">
	<ul id="slideshow" class="slides">
		<li data-duration="3000" class="active"><div>
			slide 1
		</div></li>
		<li><div>
			slide 2
		</div></li>
		<li data-duration="5000"><div>
			slide 3
		</div></li>
	</ul>
</div>

bodyタグの最後の方でプラグインを読み込み、プラグインの初期化を行います。


<script src="./js/slider.js" type="text/javascript"></script>
<script>
	$('#slideshow').dsSlider({duration: 5000, direction:"right"});
</script>
</body>

5.CSSの編集

このプラグインには、専用のCSSファイルが付属していませんので、自作する必要があります。私は作者のサンプルのCSSに修正を加えて使用しました。
文字列の表示位置は、「ul.slides li」内で「padding」を使用します。


#my-contents {
	position: absolute;
	margin:8px;
	top: 0;
	right: 0;
	bottom: 15%;
	left: 0;
	max-width:100%;
	max-height: 100%;
	background: url("./images/aurora-borealis-69221.jpg") no-repeat;
	background-size: cover;
	overflow: hidden;
}
ul.slides {
	list-style: none;
	padding: 0;
	margin: 0;
}
ul.slides li {
	margin: 0;
	background: rgba(100, 100, 100, 0.5);
	text-align: center;
	padding-top: 15%;
	color: #fff;
	font-size: 24px;
	opacity: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 8;
	transition: transform 1.4s cubic-bezier(0.01, 1, 0.91, 1) 0.5s;
}
ul.slides li.active {
	z-index: 10;
}
ul.slides li.active.slide-left {
	transform: translate3d(100%, 0, 0);
}
ul.slides li.active.slide-right {
	transform: translate3d(-100%, 0, 0);
}
ul.slides li.last-active {
	z-index: 9;
}
ul.slides li:first-child {
	left: 0;
	opacity: 1;
}