orioltf
5/3/2012 - 10:08 AM

#RESPONSIVE #HTML5 #JQUERY: Simple jQuery responsive cross-fade slider

#RESPONSIVE #HTML5 #JQUERY: Simple jQuery responsive cross-fade slider

style.css
content_copyfile_download
/*
 *  Simple fluid media
 */
	figure {position: relative; margin: 0;}
	figure img, figure object, figure embed, figure video {max-width: 100%; display: block; _width: 100%;} /* Fluid images */
	img {border: 0; -ms-interpolation-mode: bicubic;} /* Improve IE's resizing of images */


/* Slider */
.slider {
	position: relative;
	min-height: 170px;
}
	/* cycler */
	.slider .cycler {
		margin-bottom: 1.5em;
	}
		.slider .cycler figure {
			position: relative;
			display: none;
			float: left;
			margin-right: -100%;
			width: 100%;
		}
		.slider .cycler figure.active {z-index: 3; display: block;}
			.slider .cycler figure img {
				max-width: 100%;
				margin-bottom: 0;
				display: block;
			}
slideImages.js
content_copyfile_download
/*
 * Slider
 */
function slideImages(ele){
	$(ele).each(function(){
		var active = $(this).find('.active');
		var next = ($(this).find('.active').next().length > 0) ? $(this).find('.active').next() : $(this).find('figure:first');

		next.css({'z-index':2, 'display':'block'}); //move the next image up the pile
		active.fadeOut(1500,function(){ //fade out the top image
			active.css({'z-index':1}).show().removeClass('active').css({'display':'none'}); //reset the z-index and unhide the image
			next.css({'z-index':3, 'display':'block'}).addClass('active'); //make the next image the top one
		});
	});
}

(function(){
	setInterval('slideImages(".cycler")', 2000);
}());
index.html
content_copyfile_download
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>The simplest responsive slider</title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width">

		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<!--[if lt IE 7]>
			<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
		<![endif]-->

		<!-- Add your site or application content here -->
		<p>Slightly Responsive: resize your browser window.</p>
		<section id="#slider" class="slider">
			<div class="figures cycler cf">
				<figure class="active"><img src="http://placehold.it/980x360&text=image-01" alt="" /></figure>
				<figure><img src="http://placehold.it/980x360&text=image-01" alt="" /></figure>
				<figure><img src="http://placehold.it/980x360&text=image-02" alt="" /></figure>
				<figure><img src="http://placehold.it/980x360&text=image-03" alt="" /></figure>
				<figure><img src="http://placehold.it/980x360&text=image-04" alt="" /></figure>
				<figure><img src="http://placehold.it/980x360&text=image-05" alt="" /></figure>
				<figure><img src="http://placehold.it/980x360&text=image-06" alt="" /></figure>
			</div>
		</section>

		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
		<script src="slideImages.js"></script>

	</body>
</html>