Добавление элементов управления в слайдер

jQuery(function($) { 
  var $slider = $('.slider'); // class or id of carousel slider
  var $slide = 'li'; // could also use 'img' if you're not using a ul
  var $transition_time = 1000; // 1 second
  var $time_between_slides = 4000; // 4 seconds
  function slides(){
  return $slider.find($slide);
  }
  slides().fadeOut();
  slides().first().addClass('active');
  slides().first().fadeIn($transition_time);
  $interval = setInterval(
    function(){
      var $i = $slider.find($slide + '.active').index();

      slides().eq($i).removeClass('active');
      slides().eq($i).fadeOut($transition_time);

      if (slides().length == $i + 1) $i = -1; // loop to start

      slides().eq($i + 1).fadeIn($transition_time);
      slides().eq($i + 1).addClass('active');
    }
    , $transition_time +  $time_between_slides 
  );
});

<ul class="slider" style="height: 300px !important;">
  <li>
    <img src="/img/slider-main/slider-1.jpg">
  </li>
  <li>
    <img src="/img/slider-main/slider-2.jpg">
  </li>
  <li>
    <img src="/img/slider-main/slider-3.jpg">
  </li>
</ul>

.slider {
    margin: 0;
    width: 650px;
    height: 420px;
    position: relative;
    overflow: hidden;
    background: rgba(0,0,0,0.4);
    z-index: -1;
}
.slider li {
    display: none;
    position: absolute; 
    top: 0; 
    left: 0;
    z-index: -1;
}
.slider ul {
    padding-left: 0px !important;
}