Как сделать кнопки слайдеру?

<script>
   $(function() {
                 $('#images').carouFredSel({
                     items: 1,
                    direction: 'up',
                    auto: {
                        duration: 750,
                        timeoutDuration: 10000,
                        easing: 'quadratic',
                        onBefore: function() {
                            var index = $(this).triggerHandler( 'currentPosition' );
                            if ( index == 0 ) {
                                index = $(this).children().length;
                            }
                            $('#texts').trigger('slideTo', [ index, {
                                fx: 'directscroll'
                            }, 'prev' ]);
                        }
                    }
                 });
                 $('#texts').carouFredSel({
                    items: 1,
                    direction: 'up',
                    auto: {
                        play: false,
                        duration: 750,
                        easing: 'quadratic'
                    }
                 });
            });
</script>

  

      
                       <div id="slider-wrapper">
                  
                  <div id="images-wrapper">
                    <div id="images" >
                      <img src="[xfvalue_ch-foto1]" >
                      <img src="[xfvalue_ch-foto2]" >
                      <img src="[xfvalue_ch-foto3]" >
                      <img src="[xfvalue_ch-foto4]" >
                      </div>
                  </div>
                  <div id="texts-wrapper">
                    <div id="texts">
                      <div>
                        <div>
                          <h6>[xfvalue_ch1]</h6>
                          <p>[xfvalue_1ch-t]</p>
                          
                        </div>
                      </div>
                      <div>
                        <div>
                          <h6>[xfvalue_ch2]</h6>
                          <p>[xfvalue_2ch-t]</p>
                          
                        </div>
                      </div>

   
#slider-wrapper {
width: 467px;
height: 258px;
overflow: hidden;
margin: 12px 0 0 0;
}

#images-wrapper {
overflow: hidden;
float: left;
}

#images-wrapper img{
width: 173px;
height: 258px;
}
            
#texts > div {  
word-wrap: break-word;
color: #FFF;
width: 230px;
height: 246px;
font-size: 13px;
margin: 10px 0 0 15px;
font-weight: 300;
line-height: 18px;
}
           

#texts > div h6{
padding: 0;
margin: 0;
font-weight: 300;
font-size: 17px;
}