Slider Title+Text+Button 3.1

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-container">
  <ul id="slides">
    <li class="slide buried image-one">
      <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.
        </p>
        <a class="btn-slider" href="#" target="_blacnk">Clique Me</a>
      </div>
    </li>
    <li class="slide buried image-two"></li>
    <li class="slide color-1 image-two"></li>
    <li class="slide color-2 image-three"></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

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}


/* Hide the scrollbar... */

body::-webkit-scrollbar {
  display: none;
}

#slide-container {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #000;
}

#slides {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
}

.slide {
  list-style: none;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 1.0;
  background-size: cover;
  background-position: 50% 50%;
  transition: all 1s linear;
  -webkit-transition: all 1s linear;
}

.slide .item {
  text-align: center;
  top: 28%;
  margin: 0 auto;
  display: block;
  width: 50%;
  position: relative;
}

.slide .item h4 {
  font-size: 2.5em;
  margin-bottom: 0px;
}

.slide .item p {
  font-size: 1em;
  padding: 0 15px;
}

.buried {
  opacity: 0.0;
  visibility: hidden;
}

.nav {
  position: fixed;
  z-index: 99;
  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%;
}


/*BTN*/

.btn-slider {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  margin-top: 25px;
}

.btn-slider:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top,...

JavaScript

$.global = new Object();

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

$(document).ready(function() {

  $("#slides li:nth-child(1)").removeClass('buried');

  var SlideCount = $('#slides li').length;

  $.global.total = SlideCount;

  $('#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 == 0) {
    DoIt($.global.total);
  } else if ($target > $.global.total) {
    DoIt(1);
  } else {
    DoIt($target);
  }
}

function DoIt(target) {
  $('.slide').addClass('buried');
  $.global.item = target;
  var $newtarget = $("#slides li:nth-child(" + target + ")");
  $newtarget.removeClass('buried');
}