From our sponsor: Leverage AI for dynamic, custom website builds with ease.
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 }; })();