Create a full background image slider using jquery

• Published by webdevtuts
• Posted on January 31, 2011
• 44 Comments

Backgrounds are an important aspect when it comes to creating a website. Whenever i look at a website the background most likely determines what the rest of the website will look like. As we may all know it is very simple to insert a background into your web page, but what if you wanted to insert multiple backgrounds into your web page? Well today is your lucky day. In today’s tutorial I am going to teach you all how to create a full background image slider using jquery.

UPDATED: This tutorial was updated on 7-10-2011. I have made it so you can now add content over the slider.

Things you will need:

• Jquery Slideshow
• Jquery

The HTML

Copy the code below and I will explain.

<div id="slideshow">
    <img class="active" src="image1.jpg" alt="Slideshow Image 1" />
    <img src="image2.jpg" alt="Slideshow Image 2" />
    <img src="image3.jpg" alt="Slideshow Image 3" />
    <img src="image4.jpg" alt="Slideshow Image 4" />
    <img src="image5.jpg" alt="Slideshow Image 5" />
</div>

For our full background image slider you can use as many images as you may like but I will only use 5 images. The first image has a special class name active which will trigger our slider effect. I name the class active so I can later call on it, as of now it does nothing.

The Javascript

The main part of our full background slider is the JavaScript. Copy the JavaScript and I will explain. Insert the codes below into the head section of your html document.

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>

The code above gets or as you like to say calls the jquery. Change to your correct location.

<script type="text/javascript">

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order

    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

</script>

The code above is our jquery function or shall i say script. The script is basically telling jquery to look for an image with the class name active, which we’ve already provided in our html markup,Then it tells the JavaScript that when it finds the image with the class name active to get the images in the order they’re provided in.

The css

Copy the css code below. The css code below is the code which styles our full page slider image. It’s very simple and makes our background look nice.

#slideshow {
    position:relative;
    height:350px;
    z-index:-1;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

#slideshow img {
	/* Set rules to fill background */
	min-height: 100%;
	min-width: 1024px;

	/* Set up proportionate scaling */
	width: 100%;
	height: auto;

	/* Set up positioning */
	position: fixed;
	top: 0;
	left: 0;
}

@media screen and (max-width: 1024px){
	img.bg {
	left: 50%;
	margin-left: -512px;
}
}

Source: Jonraasch

If you would like to add content over your slider image copy and paste the code below into your css document. The code below is just a content div that holds our content. I position the background and gave it a -1 z-index so it would appear below our content div below.

#content {
	width: 920px;
	margin: 0 auto;
	background: rgba(11,11,11, 0.5);
	padding: 20px;
}

That is all for this tutorial but you should now have a good understanding of how to create a multiple background sideshow for your website. I did not go over the css code that much because the best way to learn is to download and dissect the code. I hope this tutorial has helped you.

Razvan Sava the author

Razvan is the founder of Webdevtuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts