Добрые люди, помогите, пожалуйста. Есть код 3 слайдеров на странице, все работает в принципе хорошо, но у этих слайдеров только автоматическая прокрутка содержимого. Хочется туда добавить кнопки для перелистывания слайдов. Как добавить дивы с кнопками я знаю, а вот сделать так, чтобы кнопки заработали - нет. В скрипте не очень разбираюсь.

<div class="example"> 
         <h1>Важная информация</h1> 
         <ul class="my_slider"> 
            <li>
               <img src="/Departments/CC/PublishingImages/Pages/default/%D0%B35.png" alt="" style="width: 449px; height: 270px;"/> 
            </li> 
            <li>
               <img src="/Departments/CC/PublishingImages/Pages/default/%D0%B34.png" alt="" style="width: 783px; height: 471px;"/> 
            </li> 
            <li>
               <img src="/Departments/CC/PublishingImages/Pages/default/%D0%B33.png" alt="" style="width: 449px; height: 270px;"/> 
            </li> 
            <li>
               <img src="/Departments/CC/PublishingImages/Pages/default/%D0%B32.png" alt="" style="width: 449px; height: 270px;"/> 
            </li> 
            <li>
               <img src="/Departments/CC/PublishingImages/Pages/default/%D0%B31.png" alt="" style="width: 449px; height: 270px;"/> 
            </li>
            <li>
               <img src="/Departments/CC/PublishingImages/Pages/default/%D0%B31.png" alt="" style="width: 449px; height: 270px;"/> 
            </li> 
         </ul> 
         <div class="counter">6 / 6</div> 
      </div> 
      <hr style="clear: both; margin-left: 10px;"/>
      <div class="example"> 
         <h1>Статистика продаж</h1> 
         <ul class="my_slider2"> 
            <li>
               <img src="/Departments/CC/PublishingImages/Pages/default/d1-2.png" alt="" style="width: 449px; height: 270px;"/> 
            </li>
            <li>
               <img src="/Departments/CC/PublishingImages/Pages/default/d2-2.png" alt="" style="width: 449px; height: 270px;"/> 
            </li>
            <li>
               <img src="/Departments/CC/PublishingImages/Pages/default/d3-2.png" alt="" style="width: 449px; height: 270px;"/> 
            </li>
            <li>               <img src="/Departments/CC/PublishingImages/Pages/default/d4-2.png" alt="" style="width: 449px; height: 270px;"/> 
            </li>
            <li>
               <img src="/Departments/CC/PublishingImages/Pages/default/d5-2.png" alt="" style="width: 449px; height: 270px;"/> 
            </li>
            <li>
               <img src="/Departments/CC/PublishingImages/Pages/default/d6-2.png" alt="" style="width: 449px; height: 270px;"/> 
            </li>
         </ul> 
         <div class="counter2">6 / 6</div> 
      </div>
      <hr style="clear: both; margin-left: 10px;"/>
      <div class="example"> 
         <h1>Статистика сервиса</h1>
         <ul class="my_slider3"> 
            <li>
               <img src="/Departments/CC/PublishingImages/Pages/default/d7-2.png" alt="" style="width: 449px; height: 270px;"/> 
            </li> 
            <li>               <img src="/Departments/CC/PublishingImages/Pages/default/d7-2.png" alt="" style="width: 449px; height: 270px;"/> 
            </li> 
            <li>
               <img src="/Departments/CC/PublishingImages/Pages/default/d8-2.png" alt="" style="width: 449px; height: 270px;"/> 
            </li> 
            <li>
               <img src="/Departments/CC/PublishingImages/Pages/default/d8-2.png" alt="" style="width: 449px; height: 270px;"/> 
            </li> 
            <li>               <img src="/Departments/CC/PublishingImages/Pages/default/d9-2.png" alt="" style="width: 449px; height: 270px;"/> 
            </li> 
            <li>
               <img src="/Departments/CC/PublishingImages/Pages/default/d9-2.png" alt="" style="width: 449px; height: 270px;"/> 
            </li> 
         </ul> 
         <div class="counter3">6 / 6</div> 
      </div> 
      <hr style="clear: both; margin-left: 10px;"/> 
      <style>
.example{width:450px;}

.my_slider3,
    .my_slider2,
.my_slider {
    width:450px;
    height:280px;
    overflow: hidden;
    position:relative;
    list-style: none outside none;
    padding:0;
    margin:0;
}
.my_slider3 li,
    .my_slider2 li,
.my_slider li {
    position: absolute;
    top: 0px;
    left: 0px;
    display:none;
}
.my_slider3 li:first-child,
.my_slider2 li:first-child,
.my_slider li:first-child {
    display:block;
}
.counter3,
        .counter2,
.counter {
    text-align:right;
    font-size:16px;
    width:450px;
}</style>
<script>
(function($){
    $.fn.MySlider = function(interval) {
        var slides;
        var cnt;
        var slides2;
        var cnt2;
            var slides3;
        var cnt3;
        var amount;
        var i;
        var i2;
            var i3;
        function run() {
            // hiding previous image and showing next
            $(slides[i]).fadeOut(1000);
            $(slides2[i2]).fadeOut(1000);
            $(slides3[i3]).fadeOut(1000);
            i++;
            i2++;
            i3++;
            if (i >= amount) i = 0;
            if (i2 >= amount2) i2 = 0;
            if (i3 >= amount2) i3 = 0;
            $(slides[i]).fadeIn(1000);
            $(slides2[i2]).fadeIn(1000);
        $(slides3[i3]).fadeIn(1000);
            // updating counter
            cnt.text(i+1+' / '+amount);
            cnt2.text(i2+1+' / '+amount2);
        cnt3.text(i3+1+' / '+amount3);
            // loop
            setTimeout(run, interval);
        }
        slides = $('.my_slider li');
        slides2 = $('.my_slider2 li');
        slides3 = $('.my_slider3 li');
        cnt = $('.counter');
        cnt2 = $('.counter2');
        cnt3 = $('.counter3');
        amount = slides.length;
        amount2 = slides2.length;
    amount3 = slides3.length;
        i=0;
        i2=0;
i3=0;
        // updating counter
        cnt.text(i+1+' / '+amount);
        cnt2.text(i2+1+' / '+amount2);
cnt3.text(i3+1+' / '+amount3);
        setTimeout(run, interval);
    };
})(jQuery);
jQuery(window).load(function() {
    $('body').MySlider(10000);
});     
</script>