NAKAZI LAB.(ナカジラボ)

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

「ResponsiveSlides.js」でつくる縦横比を固定したレスポンシブ・スライドショー

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

「ResponsiveSlides.js」でつくる縦横比を固定したレスポンシブ・スライドショー

jQueryプラグイン「ResponsiveSlides.js」でレスポンシブWebデザインに対応したスライドショーをつくります。ウィンドウ幅がスライドの画像幅以下になると、スライドの画像は縦横比を保ったままウィンドウ幅に応じて伸縮します。

デモページ

JavaScript

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

		$('#slideShow').hide().fadeIn(2000);
		$('#slideShow .main').responsiveSlides({
			auto: true,
			speed: 1000, 
			timeout: 5000,
			pager: false,
			nav: false,
			random: false,
			pause: false,
			pauseControls: true,
			navContainer: '',
			manualControls: '#nav ul',
			namespace: 'rslides'
		});

	});
})(jQuery);

HTML

<div id="slideShow">
	<ul class="main">
		<li><img src="img01.jpg" /></li>
		<li><img src="img02.jpg" /></li>
		<li><img src="img03.jpg" /></li>
	</ul>
</div>
<div id="nav">
	<ul>
		<li><a href="#"><img src="img01.jpg" width="79" height="52" /></a></li>
		<li><a href="#"><img src="img02.jpg" width="79" height="52" /></a></li>
		<li><a href="#"><img src="img03.jpg" width="79" height="52" /></a></li>
	</ul>
</div>

CSS

#slideShow {
	overflow: hidden;
	width: 100%;
	height: 100%;
}
#slideShow .main {
	position: relative;
	float: left;
	left: 50%;
}
#slideShow li {
	-webkit-backface-visibility: hidden;
	position: absolute;
	left: -50%;
	display: none;
	width: 100%;
}
#slideShow img {
	display: block;
	width: 100%;
}
#nav {
	text-align: center;
	margin-top: 15px;
}
#nav li {
	margin: 0 5px;
	display: inline-block;
	background-color: #000000;
}
#nav a {
	width: 79px;
	height: 52px;
	display: block;
}
#nav a img {
	-webkit-transition: .2s linear;
	-moz-transition: .2s linear;
	-o-transition: .2s linear;
	opacity: .5;
	filter: alpha(opacity=50);
	-ms-filter: "alpha( opacity=50 )";
}
#nav a:hover img,
#nav .rslides_here img {
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
}

デモページ

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

関連記事

  1. 「ResponsiveSlides.js」でつくる縦横比を固定したレスポンシブ・スライドショー

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

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

連絡先

nakazilab[atmark]gmail.com