carouFredSelで画面横幅いっぱいのスライダーや、レスポンシブスライダーを実装する

様々なスライダーが実現できる carouFredSel を使ってみました。
その中でも特に実用的な
・画面横幅いっぱいのスライダー
・横幅固定のスライダー
・レスポンシブスライダー
のデモを作っています。

slider

デモページ

まずはcarouFredSel公式サイトの「Download jQuery Plugin」ボタンから必要なファイルをダウンロードして読み込みます。

<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="jquery.carouFredSel-6.2.1-packed.js"></script>

今回のデモでは、htmlの構造は同じです。（id名は変えてありますが）

共通html

<div id="slider">
<div id="wrapper">
	<ul id="carousel">
		<li><a href="#"><img src="../images/main-bnr/01.jpg" width="600" height="300" /></a></li>
		<li><a href="#"><img src="../images/main-bnr/02.jpg" width="600" height="300" /></a></li>
		<li><a href="#"><img src="../images/main-bnr/03.jpg" width="600" height="300" /></a></li>
		<li><a href="#"><img src="../images/main-bnr/04.jpg" width="600" height="300" /></a></li>
	</ul>
	<a href="#" id="prev"></a>
	<a href="#" id="next"></a>
	<!-- / #wrapper --></div>
	<div id="pager"></div>
<!-- / #slider --></div>

画面横いっぱいスライダー

CSS

#slider {
	position:relative;
	overflow: hidden;
}
#wrapper {
	background: #fff;
	width: 100%;
	height: 300px;
	overflow: hidden;
}
#carousel li {
	float: left;
}
#prev, #next {
	background-color: #fff;
	opacity:0.7;
	filter: alpha(opacity=70);/* ie 6 7 */
	-ms-filter: "alpha(opacity=70)";/* ie 8 */
	zoom:1;
	display: block;
	height: 300px;
	width: 50%;
	top: 0;
	position: absolute;
}
#prev:hover, #next:hover {
	opacity:0.4;
	filter: alpha(opacity=40);/* ie 6 7 */
	-ms-filter: "alpha(opacity=40)";/* ie 8 */
	zoom:1;
}
#prev {
	left: -300px;/* スライドする画像の横半分の値 */
	background:#fff url( ../images/arrow-left.png ) 95% center no-repeat;
}
#next {
	background:#fff url( ../images/arrow-right.png ) 5% center no-repeat;
	right: -300px;/* スライドする画像の横半分の値 */
}
#prev img {
	right:20px;
	top:120px;
	position:absolute;
}
#next img {
	left:20px;
	top:120px;
	position:absolute;
}
#pager {
	text-align:center;
	padding:10px;
}
#pager a {
	border: 2px solid #ccc;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: 0 5px 0 0;
}
#pager a:hover {
	background:#eee ;
}
#pager a span {
	display: none;
}
#pager a.selected {
	background-color: #ccc;
}

JavaScript

$(function() {
	$('#carousel').carouFredSel({
		width: '100%',
		items: {
			visible: 3,
			start: -1
		},
		scroll: {
			items: 1,
			duration: 1000,
			timeoutDuration: 3000
		},
		prev: '#prev',
		next: '#next',
		pagination: {
			container: '#pager',
			deviation: 1
		}
	});
});

横幅固定スライダー

CSS

#slider {
	position:relative;
	width:800px;
	margin:0 auto;
	overflow: hidden;
}
#carousel li {
	float: left;
}
#wrapper {
	background: #fff;
	width: 100%;
	height: 300px;
	overflow: hidden;
}
#prev, #next {
	background-color: #fff;
	opacity:0.7;
	filter: alpha(opacity=70);/* ie 6 7 */
	-ms-filter: "alpha(opacity=70)";/* ie 8 */
	zoom:1;
	display: block;
	height: 300px;
	width: 50%;
	top: 0;
	position: absolute;
}
#prev:hover, #next:hover {
	opacity:0.4;
	filter: alpha(opacity=40);/* ie 6 7 */
	-ms-filter: "alpha(opacity=40)";/* ie 8 */
	zoom:1;
}
#prev {
	left: -300px;/* スライドする画像の横半分の値 */
	background:#fff url( ../images/arrow-left.png ) 95% center no-repeat;
}
#next {
	right: -300px;/* スライドする画像の横半分の値 */
	background:#fff url( ../images/arrow-right.png ) 5% center no-repeat;
}
#prev img ,
#prev img {
	right:20px;
	top:120px;
	position:absolute;
}
#next img {
	left:20px;
	top:120px;
	position:absolute;
}
#pager {
	text-align:center;
	padding:10px;
}
#pager a {
	border: 2px solid #ccc;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: 0 5px 0 0;
}
#pager a:hover {
	background:#eee ;
}
#pager a span {
	display: none;
}
#pager a.selected {
	background-color: #ccc;
}

JavaScript

$(function() {
	$('#carousel').carouFredSel({
		width: '100%',
		items: {
			visible: 3,
			start: -1
		},
		scroll: {
			items: 1,
			duration: 1000,
			timeoutDuration: 2000
		},
		prev: '#prev',
		next: '#next',
		pagination: {
			container: '#pager',
			deviation: 1
		}
	});
});

レスポンシブ（数固定・画像サイズ可変）

CSS

#slider {
	position: relative;
	margin:20px 0;
	width: 100%;
}
#wrapper {
	width: 100%;
	left: 5%;
	overflow: hidden;
	border-top: 1px #ddd solid;
	border-bottom: 1px #ddd solid;
}
#carousel li {
	margin: 10px 5px;
	border: none;
	display: block;
	float: left;
}
#carousel li img {
	width: 100%;
	height: auto;
}
#prev, #next {
	position: absolute;
	top: 0;
	background: center center no-repeat #ddd;
	width: 5%;
}
#prev:hover, #next:hover {
	background-color: #ccc;
}
#prev {
	background-image: url( ../images/arrow-left.png );
	left: 0;
}
#next {
	background-image: url( ../images/arrow-right.png );
	right: 0;
}
#pager {
	text-align:center;
	padding:10px;
}
#pager a {
	border: 2px solid #ccc;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: 0 5px 0 0;
}
#pager a:hover {
	background:#eee ;
}
#pager a span {
	display: none;
}
#pager a.selected {
	background-color: #ccc;
}

JavaScript

$(function() {
	$('#carousel').carouFredSel({
		responsive: true,
		items: {
			width: 300,
			height: '50%',
			visible: 3
		},
		auto: {
			items: 1
		},
		pagination: {
			container: '#pager',
			deviation: 1
		},
		prev: '#prev',
		next: '#next'
	});

	var $elems = $('#wrapper, #prev, #next'),
		$image = $('#responsive-carousel li:first')

	$(window).bind( 'resize.example', function() {
		var height = $image.outerHeight( true );

		$elems
			.height( height )
	}).trigger( 'resize.example' );
 
});

デモページ

こちらのサイトを参考にさせていただきました。
cool　carousels

RELATED POSTS