Background Slideshow

A fullscreen background slideshow with autoplay functionality.

Background Slideshow

From our sponsor: Get personalized content recommendations to make your emails more engaging. Sign up for Mailchimp today.

A simple fullscreen background slideshow with auto-play and controls to navigate and pause.

The HTML

<ul id="cbp-bislideshow" class="cbp-bislideshow">
	<li><img src="images/1.jpg" alt="image01"/></li>
	<li><img src="images/2.jpg" alt="image02"/></li>
	<li><img src="images/3.jpg" alt="image03"/></li>
	<li><img src="images/4.jpg" alt="image04"/></li>
	<li><img src="images/5.jpg" alt="image05"/></li>
	<li><img src="images/6.jpg" alt="image06"/></li>
</ul>
<div id="cbp-bicontrols" class="cbp-bicontrols">
	<span class="cbp-biprev"></span>
	<span class="cbp-bipause"></span>
	<span class="cbp-binext"></span>
</div>

The CSS

@font-face {
	font-family: 'entypo';
	src:url('../fonts/controls/entypo.eot');
	src:url('../fonts/controls/entypo.eot?#iefix') format('embedded-opentype'),
		url('../fonts/controls/entypo.woff') format('woff'),
		url('../fonts/controls/entypo.ttf') format('truetype'),
		url('../fonts/controls/entypo.svg#entypo') format('svg');
	font-weight: normal;
	font-style: normal;
}

.cbp-bislideshow {
	list-style: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	padding: 0;
	margin: 0;
}

.cbp-bislideshow li {
	position: absolute;
	width: 101%;
	height: 101%;
	top: -0.5%;
	left: -0.5%;
	opacity: 0;
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	transition: opacity 1s;
}

/* If background-size supported we'll add the images to the background of the li */

.backgroundsize .cbp-bislideshow li {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	background-position: center center;
}

/* ...and hide the images */
.backgroundsize .cbp-bislideshow li img {
	display: none;
}

.cbp-bislideshow li img {
	display: block;
	width: 100%;
}

.cbp-bicontrols {
	position: fixed;
	width: 300px;
	height: 100px;
	margin: -50px 0 0 -150px;
	top: 50%;
	left: 50%;
}

.cbp-bicontrols span {
	float: left;
	width: 100px;
	height: 100px;
	position: relative;
	cursor: pointer;
}

.cbp-bicontrols span:before {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	text-align: center;
	font-family: 'entypo';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 100px;
	font-size: 80px;
	color: #fff;
	-webkit-font-smoothing: antialiased;
	opacity: 0.7;
}

.cbp-bicontrols span:hover:before {
	opacity: 1;
}

.cbp-bicontrols span:active:before {
	top: 2px;
}

span.cbp-biplay:before {
	content: "e002";
}

span.cbp-bipause:before {
	content: "e003";
}

span.cbp-binext:before {
	content: "e000";
}

span.cbp-biprev:before {
	content: "e001";
}

.cbp-bicontrols span.cbp-binext {
	float: right;
}

/* Fallback */

.no-js.no-backgroundsize .cbp-bislideshow li:first-child {
	opacity: 1;
}

.no-js.backgroundsize .cbp-bislideshow li:first-child img {
	display: block;
}

The JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- imagesLoaded jQuery plugin by @desandro : https://github.com/desandro/imagesloaded -->
<script src="js/jquery.imagesloaded.min.js"></script>
<script src="js/cbpBGSlideshow.min.js"></script>
<script>
	$(function() {
		cbpBGSlideshow.init();
	});
</script>
/**
 * cbpBGSlideshow.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
var cbpBGSlideshow = (function() {

	var $slideshow = $( '#cbp-bislideshow' ),
		$items = $slideshow.children( 'li' ),
		itemsCount = $items.length,
		$controls = $( '#cbp-bicontrols' ),
		navigation = {
			$navPrev : $controls.find( 'span.cbp-biprev' ),
			$navNext : $controls.find( 'span.cbp-binext' ),
			$navPlayPause : $controls.find( 'span.cbp-bipause' )
		},
		// current itemΒ΄s index
		current = 0,
		// timeout
		slideshowtime,
		// true if the slideshow is active
		isSlideshowActive = true,
		// it takes 3.5 seconds to change the background image
		interval = 3500;

	function init( config ) {

		// preload the images
		$slideshow.imagesLoaded( function() {
			
			if( Modernizr.backgroundsize ) {
				$items.each( function() {
					var $item = $( this );
					$item.css( 'background-image', 'url(' + $item.find( 'img' ).attr( 'src' ) + ')' );
				} );
			}
			else {
				$slideshow.find( 'img' ).show();
				// for older browsers add fallback here (image size and centering)
			}
			// show first item
			$items.eq( current ).css( 'opacity', 1 );
			// initialize/bind the events
			initEvents();
			// start the slideshow
			startSlideshow();

		} );
		
	}

	function initEvents() {

		navigation.$navPlayPause.on( 'click', function() {

			var $control = $( this );
			if( $control.hasClass( 'cbp-biplay' ) ) {
				$control.removeClass( 'cbp-biplay' ).addClass( 'cbp-bipause' );
				startSlideshow();
			}
			else {
				$control.removeClass( 'cbp-bipause' ).addClass( 'cbp-biplay' );
				stopSlideshow();
			}

		} );

		navigation.$navPrev.on( 'click', function() { 
			navigate( 'prev' ); 
			if( isSlideshowActive ) { 
				startSlideshow(); 
			} 
		} );
		navigation.$navNext.on( 'click', function() { 
			navigate( 'next' ); 
			if( isSlideshowActive ) { 
				startSlideshow(); 
			}
		} );

	}

	function navigate( direction ) {

		// current item
		var $oldItem = $items.eq( current );
		
		if( direction === 'next' ) {
			current = current < itemsCount - 1 ? ++current : 0;
		}
		else if( direction === 'prev' ) {
			current = current > 0 ? --current : itemsCount - 1;
		}

		// new item
		var $newItem = $items.eq( current );
		// show / hide items
		$oldItem.css( 'opacity', 0 );
		$newItem.css( 'opacity', 1 );

	}

	function startSlideshow() {

		isSlideshowActive = true;
		clearTimeout( slideshowtime );
		slideshowtime = setTimeout( function() {
			navigate( 'next' );
			startSlideshow();
		}, interval );

	}

	function stopSlideshow() {
		isSlideshowActive = false;
		clearTimeout( slideshowtime );
	}

	return { init : init };

})();

Tagged with:

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 51

Comments are closed.
  1. Hi,

    Thanks for this plugin.

    I tested it through different browsers and found the following issue in IE 7, 8:
    It works but when a image fades out, a white page appears and stay for about 1 second and then the next image fades in.

    I have tested it with browser mode in IE 10.

  2. My suggestion is: the controls should fade away after a couple of seconds in “auto” mode, and fade on only when mouse pointer goes to the middle of the screen or in “manual” mode.

    My2cents

    • yes, I agree it would be great! any idea to do this? anybody? somebody? can’t be that difficult…

  3. Hello Mary Lou,
    I want to setting slideshowtime = 6000, but i don’t it. help me ? thanks

    • just go to cbpBGslideshow.min.js and setup the b variables, that is at 3500 ms as default. Just change as you wish. that’s it. @Hai Lai

  4. Hi, i need to put a link to each slide with something; can anyone help me how to place it? I tried setting the css class with a relative position and a z-index up to 9999.

  5. hI all, Help me !!!
    I need thumbnail navigation for Background Slideshow but I don’t code it

    Thank you !

    • Hi all, I have a Background Slideshow that have next , back and pause. But I don’t have circle thumbnails navigation .

      Help me !!!

  6. Thanks a lot ; a very nice code !
    Do you thing it’s possible to see a progress gif before the slideshow start ? (sorry for my bad english…)

  7. Hi Mary,
    how are my name is marcel i live in Cologne Germany and my English is bad.
    i’m very enthusiastic on your works only grand. I’m asking myself how do you lern
    all those things. And another question whether i can you your tutorials for my any works and how you define your copy right
    what is allowed and what no.

    thank you for all those wonderfull tutorials.

  8. Great example, but what if I need to go to the nth slide, how to call it in jquery. Would you help in that?

  9. hi , I have different divs and i want each has its own slideshow is that possible? I think the use of id=”cbp-bislideshow” and id=”cbp-bicontrols” is preventing me to do this.

    • Hi Have you found a solution ?

      I’ve the same problem, there is anyone that have found a solution for use scrollable content into each slide ?

      Thanks in advance

  10. Hello,

    This is so great and smooth, however I need this slideshow not to repeat infinitely, instead it will redirect to other page after finish show 5 images for example. Any way to do modification like that ?

    Thanks very much.

    Regards,
    J

  11. Does anyone knows if you can control when JS will load images? can set images to pause and load them only when user clicks “next” button… ?

  12. Hi All,

    My name is Pith. I’m looking background slideshow for my website. i’m very very happy to see this, it very very great and smooth, but i have one thing, if i want to integrate this with finger swipe for mobile and tablet website. How I to do? If somebody know that please help me immediate.

    Thank you for help πŸ™‚

  13. Hello, thank you for sharing this work! Your website inspires me to do a better job. What seems easy for some people can be a challenge to others and the beauty is to see all tutorials in very clean explanation as we can see here.
    Obrigada!

  14. I looked at your work and downright Mary Lou you an incredible talent, amazing!
    Thank you for sharing your work, I am a fan!

  15. Nice job. I really love it. Just thinking if it is possible to make it clickable “BG images” πŸ™‚

    • Seems to me you would just remove the background-image references, so you would always be using images inside the list items, then you would just wrap those elements with an “a href” like this:

      <li><a href="...some url..."><img src="images/1.jpg" alt="image01"/></a></li>

  16. This is a wonderful slideshow. I’m wondering if you offer an alternative with a bullet/numbered navigation instead of the Arrows?

  17. I did combined this great sample with “AnimatedHeader”, all the texts on the Fiexd-header do flash when every time the image slides.
    Is that a java confliction?

  18. I’ve used this for a new responsive site i’m building. I love this so far, though i’ve run into one small problem. It runs great in all browsers i’ve tested, but in IE 9 and 10 some slides just show as white slides. a solution to this would make is perfect.

  19. I want to add a text slide on each image slide that should be shown over the images. I tried but couldn’t find any answer. Plz help asap

  20. Tried this out on a development site – converted it for use within WordPress and scaled the images to 1600 width for resolution on larger browser windows – it looks fantastic – thank you for this, it’s quite the stroke of genius.

    I’m digging through the JS right now to see if I can find a way to increase the fade time between images. I’ve adjusted the time each background stays visible to 5 seconds and am going to see if I can make the fade take a little longer. If you have any idea where to start with that I’d love a clue – if not, thanks for sharing this – I love your work.

    Steve

  21. Excellent code and an nice easy to follow article and explanation.

    I’m wondering if it’d be possible to add an overlay?

    I’ve tried the following but can’t seem to get it to work, any ideas?

    .cbp-bislideshow:after { content: ''; background: transparent url('/images/overlays/01.png') repeat top left; }

    Thanks, Derrick

    • css
      .pattern { background: transparent url('/images/overlays/01.png') repeat; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 0; } .cbp-bislideshow { list-style: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: -1; padding: 0; margin: 0; }
      html
      <article> <div class="pattern"> <span></span> </div> <ul id="cbp-bislideshow" class="cbp-bislideshow"> <li><img src="images/slider/1.jpg" alt="image01"/></li> <li><img src="images/slider/2.jpg" alt="image01"/></li> </ul> </article>

    • Hello there, i am locking for the exact same thing.
      Have you any hints for me how to do it right?

  22. if( direction === ‘next’ ) {
    current = current > itemsCount – 1 ? ++current : 0;
    }
    else if( direction === ‘prev’ ) {
    current = current < 0 ? –current : itemsCount – 1;
    }

  23. Hi Mary Lou,

    Thanks so much for your work, I’ve gotten so much out of this website and I thought I’d give back a tiny bit by sharing a little snippet I came up with to extend the functionality of this background slider. I think it’s an issue many people face with responsive design these days, which is that landscape shots look great as a desktop bg, but usually not so much on portrait orientation of a phone or tablet. Since your code brings them in as css background-images this lends itself nicely to a little art-direction control!

    I was able to do this with your code by adding mobile and tablet img srcs via data attributes on each of the image tags and then just using if/else statements in the js to check window size and setinterval to make sure it ran smoothly after load. Data is supported pretty widely, but just to be safe you might want to run a check for that in Modernizr as well.

    Hope this helps some people out. I’ve gotten so much help from this site and the web community at large and I’m glad I finally have the acumen to share useful stuff with others!

    Here’s the example img tag:
    <li><img src="images/1.jpg" alt="image01" data-768="images/1_768.jpg" data-640="images/1_640.jpg" /></li>

    Here’s the updated javascript snippet:
    setInterval(function(){ if( Modernizr.backgroundsize ) { var windowWidth = $(window).width(); $items.each( function() { var $item = $( this ); if( windowWidth > 768 ){ $item.css( 'background-image', 'url(' + $item.find( 'img' ).attr( 'src' ) + ')' ); } else if( windowWidth <= 768 && windowWidth > 640 ){ $item.css( 'background-image', 'url(' + $item.find( 'img' ).data( '768' ) + ')' ); } else if (windowWidth <= 640 ){ $item.css( 'background-image', 'url(' + $item.find( 'img' ).data( '640' ) + ')' ); } else if (windowWidth <= 480 ){ $item.css( 'background-image', 'url(' + $item.find( 'img' ).data( '480' ) + ')' ); } } ); } else { $slideshow.find( 'img' ).show(); // for older browsers add fallback here (image size and centering) } }, 250);

  24. Thanks for the nice code. I love how it turns out. However, I’ve run into a problem:

    1. The background turns blank upon clicking on other menu items. Say if I click on Home, About, etc, the background all turns blank.
    2. However, loading the subpages directly won’t cause the problem. Say if I go type in the address mysite.com/home, mysite.com/about, etc, the slideshow will still be loaded and play.
    3. This ONLY happens on Apple devices – iPad and Mac in my case. When I test it on Android the slideshow is working fine.

    Wondering if you happen to know why. Thanks!

  25. Background looks a little bit like the Portuguese coast and beaches i’ve visited long ago. Nice.

  26. I have used six images for sliding but in INTERNET EXPLORER 8 , when I run the page first time then directly sixth image is displayed and it take delay time of all the six images together(that is in our ex. 3.5 seconds * 6) but after 1st time that the image sliding works properly like other browsers.

  27. Hey, superb article. I was wondering if there’s a way to stop the slideshow after a particular period of time and then restart after, say, 5 minutes?

  28. Hello!

    Excellent stuff, thank you!
    Does anyone know if there is a way to switch off the given css transition effect when you click on the navigation arrows? The effect should still be ON in autoplay mode, I just do not wish to wait seconds to change the image when I click on the arrow. Hope I was clear. πŸ™‚

  29. Hey there,

    I was wondering whether it is possible to have the first image of the slideshow not fading in but already being 100% visible when the page is loaded. So that when I open the website thereΒ΄s a background image at 100% opacity and after this first image the slideshow (with the fading in and out) starts.

    Any ideas or suggestions?

    Thanks!