Background Slideshow

A fullscreen background slideshow with autoplay functionality.
Background Slideshow

From our weekly sponsor: Design every part of your website with the brand new Divi Theme Builder. Try it for free.

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:

Mary Lou

ML 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.

http://www.codrops.com

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

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

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!