Как добавить навигацию к слайдеру?

Question

dj_vadim @dj_vadim

Как добавить навигацию к слайдеру?

Всем привет.
Нашёл в интернете автоматический слайдер, переделал его под показ трёх картинок и сменой их по одной, но у него нет функций для кнопок навигации, помогите пожалуйста с ними.
Код HTML5

function animation(){
      var margin = parseInt($('.slider').css('marginLeft'));  // Текущее смещение блока .slider
          width=371,                     // Ширина слайдера.
          slidersAmount=$('#sotr_slider').children().length;  // Количество слайдов в слайдере.
      if(margin!=(-(width*(slidersAmount-3)))){                 // Если текущий слайд не последний,
        margin=margin-width;                                  // то значение margin уменьшается на ширину слайда.
      }else{                                                  // Если показан последний слайд,
        $('.slider').css('margin-left', -width);              // то блок .slider возвращается в начальное положение,
        margin=-width*2;         
      }
      $('.slider').animate({marginLeft:margin},1000);         // Блок .slider смещается влево на 1 слайд.
    };
 
var width=$('.slider-box').width();                     // Ширина слайдера.
      interval = 5000;                                    // Интервал смены слайдов.
 
      $('.slider li:last').clone().prependTo('.slider');     // Копия последнего слайда помещается в начало.
      $('.slider li').eq(1).clone().appendTo('.slider');     // Копия первого слайда помещается в конец.  
      $('.slider').css('margin-left', -width);                // Контейнер .slider сдвигается влево на ширину одного слайда.
      setInterval('animation()',interval);                    // Запускается функция animation(), выполняющая смену слайдов.
      $('.slider_sotr div.slider_nav_right').click(function(){
         // тут навигация по клику на правую кнопку
      });
      
      $('.slider_sotr div.slider_nav_left').click(function(){
        // тут навигация по клику на левую кнопку
      });

<div class="slider_sotr">
      <div class="slider_nav_left">&laquo;</div>
       <div class="slider_nav_right">&raquo;</div>
       <div class="slides slider-box">
            <ul class="slider" id="sotr_slider">
                  <li><img src="img/slider_bottom/1.jpg" alt="" /><p>Ирина, администратор</p></li>
                  <li><img src="img/slider_bottom/2.jpg" alt="" /><p>Марина, администратор</p></li>
                  <li><img src="img/slider_bottom/3.jpg" alt="" /><p>Карина, администратор</p></li>
                  <li><img src="img/slider_bottom/4.jpg" alt="" /><p>Светлана, администратор</p></li>
                  <li><img src="img/slider_bottom/5.jpg" alt="" /><p>Анна, администратор</p></li>
                  <li><img src="img/slider_bottom/6.jpg" alt="" /><p>Мария, администратор</p></li>
                  <li><img src="img/slider_bottom/7.jpg" alt="" /><p>Ольга, администратор</p></li>
             </ul>
      </div>
</div>

<style>
.sotr .slider_sotr .slides {
    display: block;
    height: 270px;
    width: 1113px;
    overflow: hidden;
}
 
.sotr .slider_sotr .slides ul {
    height: 270px;
    position: relative;
    width: 10000px;
}
 
.sotr .slider_sotr .slides ul li {
    display: block;
    float: left;
    height: 270px;
    margin: 0;
    position: relative;
    width: 371px;
    z-index: 0;
}
</style>