<div class="slide-wrap">
  <div class="slide-mask">
    <ul class="slide-group">
      <li class="slide">this</li>
      <li class="slide">is</li>      
      <li class="slide">a</li>
      <li class="slide">simple</li>
      <li class="slide">slider</li>
    </ul>
  </div>
  
  <div class="slide-nav">
    <ul>
      <li class="bullet"></li>
      <li class="bullet"></li>
      <li class="bullet"></li>
      <li class="bullet"></li> 
      <li class="bullet"></li>       
    </ul>
  </div>
</div>

body {
	background: rgb(191, 76, 76);
}

/* slider
----------------------*/
.slide-wrap {
  margin: 5% auto 0;
  width: 50%;
}
.slide-mask {
  position: relative;
  overflow: hidden;
  height: 130px;
}
.slide-group {
  position: absolute; 
  top: 0px; 
  left: 0;
  width: 100%;
}
.slide {
  height: 130px;
	font: 100 90px/135px "lato";
	font-size: 2em;
	color: #fff;
	text-align: center;
	text-transform: uppercase;  
}

/* nav
----------------------*/
.slide-nav {
  text-align: center;
}
.slide-nav ul {
	margin: 0;
	padding: 0;
}
.slide-nav li {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: rgb(175, 56, 56);
  cursor: pointer;
  margin-left: .5em;
}
.slide-nav li.current {
	background: rgb(144, 39, 39);
}

var $slide = $('.slide'),
    $slideGroup = $('.slide-group'),
    $bullet = $('.bullet');

var slidesTotal = ($slide.length - 1),
    current = 0,
    isAutoSliding = true;

$bullet.first().addClass('current');

var clickSlide = function() {
  //stop auto sliding
  window.clearInterval(autoSlide);
  isAutoSliding = false;

  var slideIndex = $bullet.index($(this));

  updateIndex(slideIndex);
};

var updateIndex = function(currentSlide) {
  if(isAutoSliding) {
    if(current === slidesTotal) {
      current = 0;
    } else {
      current++;
    }
  } else {
      current = currentSlide;
  }

  $bullet.removeClass('current');
  $bullet.eq(current).addClass('current');

  transition(current);
};

var transition = function(slidePosition) {
    $slideGroup.animate({
      'top': '-' + slidePosition + '00%'
    });
};

$bullet.on( 'click', clickSlide);

var autoSlide = window.setInterval(updateIndex, 2000);