Background Slideshow

A fullscreen background slideshow with autoplay functionality.

Background Slideshow

View demo Download source

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 };

})();

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 48

Comments are closed.
  1. 1

    Nice job. I really love it. Just thinking if it is possible to make it clickable “BG images” :-)

    • 2

      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>

  2. 3

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

  3. 5

    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?

  4. 6

    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.

  5. 7

    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

  6. 10

    Great work! How can i modify the image opacity velocity (transition’s velocity)?
    Thanks!

  7. 11

    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

  8. 12

    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

    • 13

      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>

    • 14

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

  9. 15

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

  10. 16

    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);

  11. 17

    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!

  12. 18

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

  13. 19

    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.

  14. 20

    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?

  15. 22

    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. :)

Comments are closed.