Create a full background image slider using jquery

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:

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
    • Marcell says:

      Yes you could probably integrate another script into this script if you’re familiar with js. Yes I would recommend using coda slider with something like this that way you can customize a menu or you could just hack away at the code.

  1. Gary says:

    Hi Marcell,
    Thanks for the share. This is almost exactly what I’m looking for but with one exception. Can I control the transition method? I would like to slide a low res image accross the page with another following in behind it. Is that possible?

    Cheers
    Gary

    • Marcell says:

      No funciona en IE6, pero si no tienen conocimiento todos han dejado de apoyar IE6 y debe hacerlo. Miscrosoft está trabajando en ie10 en estos momentos:)

    • Marcell says:

      Hola. Se podría crear un centro de envase y aparecerá sobre el fondo mediante la propiedad z-index de CSS. Establecer z del índice para la clase de fondo de alta y baja para su clase de contenedor.

    • julio says:

      Hola que tal, me podrias ayudar en la segunda imagen?, es que no se como colocarlo detras de la otra, se coloca por debajo de la primera imagen y me gustaría saber como solucionarlo. Gracias

    • Voy a echar un vistazo y tendrá que modificar el tutorial. Parece que usted y otras personas están teniendo problemas con la segunda imagen también. Podría haber una solución fácil a este problema.

  2. krunal says:

    Hey Marcell great job, this is what I am looking for… this is great. Now I wanna add Navigation Thumb at the bottom, do you’ve any idea how to start with it? Anyway this is a excellent job. Thanks for that

  3. Primo says:

    Hey Marcell. Really nice script. I was able to get this working and modified it to fit our website, cliquevodka.com.

    I have not made it active yet because it seems after the last picture it jumps to the first and fades really quickly to the next. Anything you would suggest editing?

  4. Jake says:

    I am trying to figure out how to add text to this and it wont show up when there is a background image loaded. Any ideas. I have adjusted the z-index and still nothing.

    • Maybe try positioning the element absolute and setting a z-index to the element for text to appear over it. If that dose not work let me know and I will update tutorial and add text area over background.

  5. Tino says:

    Hello Marcell

    I am trying to use the full screen fading background images script here on my web site, and need to be able to have the slideshow be happening behind my page content. just like you you have a page background, then I want to have the background fading through the various images. Please help.

    Best Regards,
    tino.

    • hey there Tino. I have just updated this tutorial and think this is what you’re looking for. Apply z-index of -1 to the slider div in the css then create content so it will show over background.

  6. krisg says:

    Ok I got that figured out now just need to get my content to go over the background. Can I put divs into the content div to add a navigation, more buttons etc.? I am thinking yes but not sure how to do it. Also is there a way to make the background images slide in from the side one after the other instead of fade in?

    Thanks!!

  7. Nikita says:

    Hey Marcell.

    I found one thing that did not work in Chrome. When you’re calling function from setInterval you write setInterval(“slideSwitch()”,…

    But it gives an error to me. So I’ve changed it to setInterval(slideSwitch, …. And it works now.

  8. Seema says:

    Hi,

    Thanks for your valuable tutorials!
    It’s work!
    Nice, I have doubt that can we give link on images of scroller then we can link images to various pages.

    Thanks

  9. Raymond says:

    This is a very good background slider. However one problem with it is that it creates a large amount of unnecessary space wherever you place the slideshow div. If there is a way to fix that please tell me! Or if you could fix it please fix! Otherwise it’s an amazing code. Simple and user-friendly.

  10. fanfan says:

    Why I can’t see any slider images in the demo page? I tried with IE, FF and Chrome, none of them works, I can just see one bg image and a jquery error:(

Leave a Reply