5 Minute JQuery Image Slider

The image slider, such a common need and yet sometimes so hard to find. There are tons of good sliders out there made with JQuery. Some are hard to use, others aren’t. Some can only do a portion of what you need while others are so massive they are hard to customize. With this post I intend to show you, in under 50 lines of code (HTML, JS and CSS) how to build a simple slider that you can use on your projects. The code can easily be extended with JavaScript/JQuery, and through simple CSS can be customized to fit a div or go full screen (as this example shows as this was my need). This is the five minute image slider! Comments have been included in the code to explain what’s going on.

The images provided are not owned by me but rather are the result of a quick image search on Bing. These should be swapped out for your own images. In addition…

This code is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. Tested in IE9, IE 10, but should work in most/all modern browsers.

 

<!DOCTYPE html>
<head>
	<script src="http://code.jquery.com/jquery-1.9.0.js" type="text/javascript"></script>
	<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js" type="text/javascript"></script>
	<style type="text/css">
		body {
			margin:0; /* remove the default margin */
			padding:0; /* remove the default padding */
		}

		#slides, #slides img.active{
			min-height: 100%; /* important; sets the hight in this case full screen */
			min-width: 1024px; /* a minimum width set to a standard screen size */
			width: 100%; /* important; sets to full screen */
			height: auto; /* this just sets a full height */
			position: fixed; /* tells it to not move */
			top: 0; /* top corner */
			left: 0; /* left side */
			display:block; /* display as a block element */
		}

		#slides img {
			display:none; /* normal images are hidden */
		}
	</style>
	<script type="text/javascript">
		function slide(div) {
			var $active = $('#' + div + ' .active'); // we add this class to images that are going to show
			var $next = ($('#' + div + ' .active').next().length > 0) ? $('#' + div + ' .active').next() : $('#' + div + ' img:first'); // get the next image
			$next.fadeIn("slow").addClass('active'); // set the class on the next image
			$active.fadeOut(function () { // a pretty little function which removes the class from the currently active image
				$active.removeClass('active'); // remove .active
			});
		}
		$(document).ready(function () { // where the magic happens
			setInterval('slide("slides")', 5000); // swap the image at X interval
		});
	</script>
</head>
<body>
<div id="slides"> <!-- notice I put the div name as a param in the slide() function -->
	<img src="http://www.onlinegames.cat/wp-content/uploads/2011/11/halo-4-1.jpg" class="active" alt="" />
	<img src="http://hdfreewallpapers.com/walls/2012/07/13/gears_of_war_4-HD.jpg" alt="" />
</div>
</body>
</html>

 

Enjoy!

3 comments

  1. Chris says:

    Finally some jQuery you can just copy and paste that actually works! I can think of a dozen projects I could have used this for rather than struggling to get a plugin to work. Props @blumshapiro

  2. JamesP says:

    Great sample code for those learning JQuery/HTML/CSS. Do you have any plans on turning this in to a plugin? I’d be curious in seeing how to do that.

  3. This is so awesome, without jquerys life of a website developer is incomplete, thanks for sharing

Leave a Reply

Your email address will not be published. Required fields are marked *

A985 Ab9fty XIp

Please type the text above: