Five Minute JQuery Image Slider

< Back to Insights
Insights  <  Five 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>
	<script src="" type="text/javascript"></script>
	<script src="" type="text/javascript"></script>
	<style type="text/css">
		body {
			margin:0; /* remove the default margin */
			padding:0; /* remove the default padding */

		#slides, #slides{
			min-height: 100%; /* important; sets the height 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 */
	<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
<div id="slides"> <!-- notice I put the div name as a param in the slide() function -->
	<img src="" class="active" alt="" />
	<img src="" alt="" />



Continue the Conversation with Our Team
Get in touch with us.

Contact Us