jQuery Background Slideshow Plugin with Autoplay Functionality

In today's tutorial we're going to create a jQuery based fullscreen slidershow with autoplay, pause and navigation controls. Good for create a stylish background slideshow for your website.

See also:

• Dynamic Slideshow Background Plugin - backstretch
• jQuery Fullscreen Background Slideshow - MaxImage
• Fullscreen Background Slideshow with Audio
• Animated Fullscreen Background Image Slideshow
• Amazing Background & Slideshow Plugin - Vegas

How to use it:

1. Include jQuery library and cbpBGSlideshow.min.js on your page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="js/cbpBGSlideshow.min.js"></script> 

2. Include imagesLoaded plugin to trigger a callback after all the selected/child images have been loaded.

<script src="js/jquery.imagesloaded.min.js"></script> 

3. Markup Html Structure

<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>
...
</ul> 

4. The CSS

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

5. Initialize the plugin

<script>
$(function() {
	cbpBGSlideshow.init();
});
</script>

 

---

This awesome jQuery plugin is developed by MARY LOU. For more Advanced Usages, please check the demo page or visit the official website.