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">
      <div class="item">
        <h4>Title Slider Text</h4>
        <p>O contrário da crença popular, o Lorem Ipsum não é simplesmente texto aleatório. Tem raízes numa peça de literatura clássica em Latim, de 45 AC, tornando-o com mais de 2000 anos. Richard McClintock, um professor de Latim no Colégio Hampden-Sydney,
          na Virgínia, procurou uma das palavras em Latim mais obscuras (consectetur) numa passagem Lorem Ipsum, e atravessando as cidades do mundo na literatura clássica, descobriu a sua origem.
        </p>
        <a class="btn-slider" href="#" target="_blacnk">Button</a>
      </div>

    </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>

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: 1.2em;
  background-size: cover;
  background-position: 50% 50%;
  color: #fff;
  -webkit-transform: translate3d(0px, 0px, 0px);
  visibility: hidden;
  -webkit-transform-style: preserve-3d;
}

.slide .item{
  text-align:center;
  padding:0 11em;
  top:25%;
  position:absolute;
}

.slide .item h4 {
  font-size: 2em;
}

.slide .item p {
  font-size: 1em;
}

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

#left {
  left: 3%;
}

#right {
  right: 3%;
}


/*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);

}