Responsive Full Page Image Slider with jQuery and CSS3

A simple jQuery plugin to create a responsive & full page background image slider with CSS3 transitions.

How to use it:

1. Include the Font Awesome 4 for the navigation icons.

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

2. Include a CSS Reset in the document.

<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet">

3. Insert your images for the full page image slider.

<div class="slider">
  <div class="slider-control slide-left"><i class="fa fa-angle-left fa-2x"></i></div>
  <div class="slider-control slide-right"><i class="fa fa-angle-right fa-2x"></i></div>
  <div class="slide-box">
    <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>
</div>

4. You can also add a flex-box container inside a slide as follows.

<div class="slide" style="background-image: url(1.jpg)">
  <div class="slide-content">
    <h1>Title</h1>
    <p>This is slide 1</p>
  </div>
</div>

5. The required CSS/CSS3 styles for the image slider.

html,
body {
  height: 100%;
  font-weight: 100;
}

h1,
h2,
h3,
h4 { font-weight: 900; }

.slider {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.slider .slider-control {
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
  width: 48px;
  height: 48px;
  position: absolute;
  top: 50%;
  margin-top: -24px;
  z-index: 1;
  border-radius: 50%;
  background: #FFF;
  opacity: .8;
  cursor: pointer;
  line-height: 48px;
  text-align: center;
}

.slider .slider-control:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
  background: #222;
}

.slider .slider-control.slide-left { left: 24px; }

.slider .slider-control.slide-right { right: 24px; }

.slider .slider-control i {
  color: #ccc;
  line-height: 48px;
}

.slider .slide-box {
  -webkit-transition: all 0.8s ease-out;
  -moz-transition: all 0.8s ease-out;
  transition: all 0.8s ease-out;
  height: 100%;
  width: 999999px;
}

.slider .slide-box img { width: 100%; }

.slider .slide-box .slide {
  -webkit-transition: all 0.8s ease-out;
  -moz-transition: all 0.8s ease-out;
  transition: all 0.8s ease-out;
  background-size: cover;
  background-position: center center;
  float: left;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 20000px #000;
  z-index: 10;
}

.slider .slide-box .slide .slide-content {
  height: 40%;
  font-size: 22px;
  min-height: 200px;
  width: 40%;
  min-width: 300px;
  color: #FFF;
  background: rgba(51, 76, 153, 0.5);
  text-align: center;
}

6. Include the latest version of jQuery library at the bottom of the page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 

7. The jQuery script to enable the image slider.

var $slider = $('.slider');
var $slideBox = $slider.find('.slide-box');
var $leftControl = $slider.find('.slide-left');
var $rightControl = $slider.find('.slide-right');
var $slides = $slider.find('.slide');
var numItems = $slider.find('.slide').length;
var position = 0;


var windowWidth = $(window).width();
$slides.width(windowWidth);
$leftControl.on('click', function(){
var width = $slider.width();
position = position - 1 >= 0 ? position - 1 : numItems - 1;
if(position != numItems-1){
$slider.find('.slide').eq(position + 1).css('margin-left', 0);
}
else{
$slider.find('.slide:gt(0)').each(function(index){
$(this).css('margin-left', width * -1 + 'px');
});
}
});

$rightControl.on('click', function(){
var width = $slider.width();
position = position + 1 < numItems ? position + 1 : 0;
if(position != 0){
$slider.find('.slide').eq(position).css('margin-left',width * -1 + 'px');
}
else{
$slider.find('.slide').css('margin-left', 0);
}
});

$(window).resize(function(){
 $slides.width($(window).width()).height($(window).height);
});

---

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