NAKAZI LAB.(ナカジラボ)

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

「slider.js」でつくる、限られた範囲で横長の画像を見せる(左右のコントローラー付き)

2014年12月24日jQueryプラグイン活用

「slider.js」でつくる、限られた範囲で横長の画像を見せる(左右のコントローラー付き)

今回はタイトルのような使い方で「slider.js」を紹介しましたが、こちらのjQueryプラグインは複数の画像をループで横に流したり他にも色々な使い方が可能です。

デモページ

JavaScript

(function($){
	$(function() {
		$('#slide').slider({
			shuttle: true,
			speed: 1
		});
		$('.slideCtrl.left').hide();
	});
})(jQuery);

HTML

<div id="slide">
	<div class="slideGuide"><div class="slideCell"><img src="img01.jpg"></div></div>
	<span class="slideCtrl left">&lt;</span>
	<span class="slideCtrl right">&gt;</span>
</div>

CSS

#slide {
	width: 800px;
	height: 400px;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
}
.slideCell {
	width: 1600px;
	float: left;
	opacity: 1 !important;
}
.slideCtrl {
	display: inline-block;
	position: absolute;
	z-index: 100;
	cursor: pointer;
	padding: 15px 15px;
	background: #000000;
	color: #ffffff;
	top: 50%;
	margin-top: -30px;
	transition: .2s linear;
	-webkit-transition: .2s linear;
	-moz-transition: .2s linear;
	-o-transition: .2s linear;
	-ms-transition: .2s linear;
	opacity: .6 !important;
}
.slideCtrl:hover {
	background: #ffffff;
	color: #000000;
	opacity: .6 !important;
}
.left { left: 15px; }
.right { right: 15px; }

デモページ

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

関連記事

  1. 「slider.js」でつくる、限られた範囲で横長の画像を見せる(左右のコントローラー付き)

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

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

連絡先

nakazilab[atmark]gmail.com