JQuery full screen background rotator/slideshow example

How to create full screen background rotator/slideshow using jquery.It is simple with using jquery supersized plugin.Only you have to pass parameters it the function and it’ll automatically rotating with images.It is not re-size when zoom in and zoom out of the browser and working with all major web browsers.Read more to view demo and download full source code.

Step-1

Add the following libraries into your page.

Step-2

Add the following slideshow/ratator function parameters into the page head section.

Step-3

Add these css codes to the page head.

		*{
			margin:0;
			padding:0;
		}
		a{
			color:#8FC2FF;
			text-decoration: none;
			outline: none;
		}
		a:hover{
			text-decoration: underline;
		}
		img{
			border:none;
		}
		body {
			overflow:hidden;/*Needed to eliminate scrollbars*/
			background:#000;
		}
		/*Supersize Plugin Styles*/
		#loading {
			position: absolute;
			top: 49.5%;
			left: 49.5%;
			z-index: 3;
			width: 24px;
			height: 24px;
			text-indent: -999em;
			background-image: url(images/progress.gif);
		}
		#supersize{
			position:fixed;
		}
		#supersize img, #supersize a{
			height:100%;
			width:100%;
			position:absolute;
			z-index: 0;
		}
		#supersize .prevslide, #supersize .prevslide img{
			z-index: 1;
		}
		#supersize .activeslide, #supersize .activeslide img{
			z-index: 2;
		}

Step-4

Add these html to hold the slide show images.

Full example page is here.

View Demo

Download Full Source code (7MB)