Modern Resonsive Fullscreen Image Slider with jQuery and CSS3

A fashion, responsive, fullscreen and jQuery based image slider/carousel which allows you to cycle through a set of images with CSS3 transitions.

How to use it:

1. Include the Font Awesome 4 for navigation icons (Optional).

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

2. The markup structure for the slider. Add your images into the slider using CSS background-image property.

<div id="slide-window">
  <ol id="slides" start="1">
    <li class="slide color-0" style="background-image:url(1.jpg);"></li>
    <li class="slide color-1" style="background-image:url(2.jpg);"></li>
    <li class="slide color-2" style="background-image:url(3.jpg);"></li>
    <li class="slide color-3" style="background-image:url(4.jpg);"></li>
    <li class="slide color-4" style="background-image:url(5.jpg);"></li>
  </ol>
  <span class="nav fa fa-chevron-left fa-3x" id="left"></span>
  <span class="nav fa fa-chevron-right fa-3x" id="right"></span>
</div>

3. The required CSS/CSS3 styles for the background image slider.

#slide-window {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0px;
  left: 0px;
}

#slides {
  height: 100%;
  position: absolute;
  margin: 0px;
  padding: 0px;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
}

.slide {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 100%;
  background: #ccc;
  text-align: center;
  line-height: 300px;
  background-size: cover;
  background-position: 50% 50%;
  opacity: 1.00;
  color: #fff;
}

.nav {
  position: fixed;
  z-index: 9;
  top: 50%;
  cursor: pointer;
  color: #fff;
  opacity: 0.7;
  transition: all 0.66s ease;
  -webkit-transition: all 0.66s ease;
}

.nav:hover { opacity: 1.0; }

#left { left: 3%; }

#right { right: 3%; }

4. Include the necessary jQuery Javascript library at the bottom of the document.

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

5. A little (jQuery)Javascript to enable the image slider.

$.global = new Object();

$.global.item = 1;
$.global.total = 0;

$(document).ready(function() 
{
  
  var WindowWidth = $(window).width();
  var SlideCount = $('#slides li').length;
  var SlidesWidth = SlideCount * WindowWidth;
  
  $.global.item = 0;
  $.global.total = SlideCount; 
    
  $('.slide').css('width',WindowWidth+'px');
  $('#slides').css('width',SlidesWidth+'px');

  $('#left').click(function() { Slide('back'); }); 
  $('#right').click(function() { Slide('forward'); }); 
    
});

function Slide(direction)
{   
  if (direction == 'back') { var $target = $.global.item - 1; }
  if (direction == 'forward') { var $target = $.global.item + 1; }  
    
  if ($target == -1) { DoIt($.global.total-1); } 
  else if ($target == $.global.total) { DoIt(0); }  
  else { DoIt($target); }    
}

function DoIt(target)
{
  var $windowwidth = $(window).width();
  var $margin = $windowwidth * target; 
    
  $('#slides').css('transform','translateX(-'+$margin+'px)');  
    
  $.global.item = target;  
  
}

---

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