Slider Title+Text+Button

This is responsive! With title paragraph and a button

by cintia_rodrigues

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
 <div id="slide-window">
   <ul id="slides" start="1">
      <li class="slide color-0 image-one alive"></li>
      <li class="slide color-1 image-two" ></li>
      <li class="slide color-2 image-three"></li>
      <li class="slide color-3 image-four"></li>
      <li class="slide color-4 image-five"></li>
    </ul>
 
    <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 id="credit">Photography by Trey Ratcliff<br>Slide No.<span id="count">1</span><br><span id="zoom">zoom</span></div>
    
</div>

CSS

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

#slides
  {
  height:100%;  
  position:absolute;
  margin:0px;
  padding:0px;
  
  -webkit-transform: translate3d(0px,0px,0px);
  transform: translate3d(0px,0px,0px);
    
  transition: all 0.66s ease; -webkit-transition: all 0.66s ease; 
  }

.slide {
  list-style:none;
  position: relative;
  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%;
  color:#fff;
  -webkit-transform: translate3d(0px,0px,0px);
  visibility:hidden;
  -webkit-transform-style: preserve-3d;
  }

.alive { visibility:visible; }

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


#credit 
  { 
  position:fixed; 
  top:25px; 
  left:25px; 
  color:#eaeaea; 
  font-family: 'Courier New', Courier, monospace;  
  }
  
  /*Content images*/
  
  .image-one{
     background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-JSxf5Nm/0/X3/Burning-Man-Day-6%20%28202%20of%201606%29-X3.jpg);
  }
  
  .image-two{
      background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-KMjVHRd/0/X3/Andramada-X3.jpg);
  }
  
  .image-three{
    background-image:url(http://stuckincustoms.smugmug.com/Burning-Man/i-dd9xmfn/0/X3/The%20Steamy%20Car-X3.jpg);
  }
  
  .image-four{
    background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-KscS8CF/0/X3/Burning-Man-Day-1%20%281006%20of%201210%29-X3.jpg);
  }
  
  .image-five{
    background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-jQcPqJb/0/X3/Burning-Man-Last-Day-Night%20%28151%20of%201120%29-X3.jpg);
  }

JavaScript

$.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');

   $("#slides li:nth-child(1)").addClass('alive');
    
  $('#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; 
    var $actualtarget = target+1;
    
    $("#slides li:nth-child("+$actualtarget+")").addClass('alive');
    
    $('#slides').css('transform','translate3d(-'+$margin+'px,0px,0px)');	
    
    $.global.item = target; 
    
  $('#count').html($.global.item+1);
    
  }