Responsive Full Screen Background Slider Plugin For jQuery

A full screen background image slider plugin that automatically resizes and centers the images while preserving their aspect ratios to adapt your slider for any device. Animated with CSS3 transitions and transforms.

How to use it:

1. Create a set of DIV elements with background images into your web page.

<div class="slides">
  <div class="slide" style="background-image: url(1.jpg)"></div>
  <div class="slide" style="background-image: url(2.jpg)"></div>
  <div class="slide" style="background-image: url(3.jpg)"></div>
  <div class="slide" style="background-image: url(4.jpg)"></div>
</div>

2. Create an arrows navigation using uses Font Awesome arrow icons for the background slider.

<nav>
  <button class="button-left">
    <i class="fa fa-angle-left fa-2x"></i>
  </button>

  <button class="button-right">  
    <i class="fa fa-angle-right fa-2x"></i>
  </button>
</nav>

3. Create an arrows navigation using uses Font Awesome arrow icons for the background slider.

<nav>
  <button class="button-left">
    <i class="fa fa-angle-left fa-2x"></i>
  </button>

  <button class="button-right">  
    <i class="fa fa-angle-right fa-2x"></i>
  </button>
</nav>

4. The CSS to style the navigation arrows.

nav {
  position: absolute;
  top: 2em;
  right: 2em;
  z-index: 99;
}
nav button.disabled {
  pointer-events: none;
  opacity: 0.3;
}
nav button {
  background: transparent;
  outline: none;
  border: none;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  display: inline-block;
  margin: 0;
  padding: 0;
}
nav button i {
  color: rgba(255, 255, 255, 0.8);
  font-size: 4em;
}
nav button i:hover {
  color: white;
}

5. The core CSS/CSS3 styles for the background slider.

*,
*::before,
*::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.slides {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  overflow: hidden;
  white-space: nowrap;
  -moz-transition: all 0.45s ease;
  -o-transition: all 0.45s ease;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.slides .slide {
  display: inline-block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  vertical-align: top;
  margin-right: -4px;
}

.slides .slide .slide-content.hide-info {
  -moz-transform: translateY(-125%);
  -ms-transform: translateY(-125%);
  -webkit-transform: translateY(-125%);
  transform: translateY(-125%);
}

.slides .slide .slide-content {
  position: relative;
  top: 0;
  padding: 1em 2em;
  max-width: 600px;
  color: white;
  white-space: normal;
  background: rgba(0, 0, 0, 0.5);
  margin: 1em;
  border-left: 0.5em solid rgba(255, 255, 255, 0.8);
  -moz-transition: -moz-transform 0.5s ease;
  -o-transition: -o-transform 0.5s ease;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
}

.slides .slide .slide-content h2 {
  font-size: 2em;
  font-weight: lighter;
  text-transform: uppercase;
}

.slides .slide .slide-content h2 span { font-weight: bolder; }

.slides .slide .slide-content p {
  font-weight: lighter;
  line-height: 1.5;
  letter-spacing: 1px;
  font-size: 0.8em;
}

6. Load the latest version of jQuery library and the jQuery background slider plugin at the bottom of the web page.

<script src="//code.jquery.com/jquery-2.11.1.min.js"></script> 
<script src="backgroundslider.js"></script> 

7. Initialize the plugin on document ready and done.

$(document).ready(function(){
  
  $(".slides").BackgroundSlider();
  
});

---

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