jQuery Fullscreen Background Slider Plugin - screenslider

Screenslider is a tiny jQuery plugin for creating a responsive fullscreen background slideshow that automatically switches the background images at certain intervals.

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
• jQuery Background Slideshow Plugin with Autoplay Functionality
• Lightweight jQuery Background Slideshow Plugin - BgSwitcher

How to use it:

1. Create a set of images you want to slide.

<div id="screenslider"> 
<img src="slides/1.jpg" /> 
<img src="slides/2.jpg" /> 
<img src="slides/3.jpg" /> 
</div>
<section class="content-wrapper"> Your content here </section>

2. Include jQuery javascript library and jQuery screenslider plugin on your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="js/screenslider.js"></script> 

3. Put styles in your CSS and change it to your taste.

body {
margin: 0;
}
.screenslider img {
position: absolute;
left: 0;
}
.screenslider {
display: none;
position: fixed;
width: 100%;
height: 100%;
text-align: center;
background: #777;
overflow: hidden;
top: 0;
}
.content-wrapper {
position: relative;
z-index: 1;
height: 100%;
}

4. Call the plugin with options.

<script>
(function($){
$(window).load(function(){
$('#screenslider').screenslider({
pauseTime: 4000,
speed: 50 //between 0 and 100
});
})
})(jQuery);
</script> 

---

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