Getting a jQuery slider navigation to work

Question

I am unable to get the slider to change without it bugging out into multiple instances. I would like to be able to click a link so that the slider loads from a specific slide if needed. I believe I have tried everything.

JS Fiddle: http://jsfiddle.net/fVdzA/

function Slider(interval, slide)
 {
     
     //Clear Qeue
     //Initialize Variables
        var slides;
        var titles;
        var desc;
        var amount;
        var amounttitle;
        var i;
     
     //Count Elements
        slides = $('#slider').children();
        titles = $('#slider li').children('.title');
        desc = $('#slider li').children('.desc');
        amount = slides.length;
        amounttitle = titles.length;
        amountdesc = desc.length;
        i=0;
        
        //hide first slide properly
        $(slides[0]).hide();
        
    //Choose Function
    if(slide==null){
        //Automatic Start from 0
    timer = setTimeout(automatic(0),4000);      
    }else{
        //Choose Slide to start at
        automatic(slide);
    }
    
    function automatic(i) {
            $(slides[i]).hide();
            $(titles[i]).hide();
            $(desc[i]).hide();
            $(slides[i]).fadeIn(1000, function(){
                $(titles[i]).fadeIn(1000, function(){
                    $(desc[i]).fadeIn(1000, function(){
                        $(slides[i]).delay(2000).fadeOut(1000, function(){
                                $(titles[i]).hide();
                                $(desc[i]).hide();
                                i++; if (i >= amount){ i = 0;}
                                timer = setTimeout(automatic(i), 4000);
                            });
                        });
                    });
                });
        
     }
    
 }
 
    //Load navigation
    slides = $('#slider').children();
    $(slides).each(function(index) {
             $("#slideControl").append(' <a href="#" class="button" ref="'+index+'">'+index+'</a> ');
        });
    
$('.button').live("click", function() {
        //clearTimeout(timer);  
        $('#slider li').hide();
         Slider(4000, null).clearTimeout(timer);
}); 
        
 Slider(4000, null).clearTimeout(timer);

<div id="slide">
  <ul id="slider">
 <li><img src="images/slide/slide1/slide.png" width="870" height="330" alt="slide1" class="round" /><span class="title"><img src="images/slide/slide1/title.png" alt="title"  class="leftMidTitle" /></span><span class="desc"><img src="images/slide/slide1/desc.png" alt="desc" class="leftMidDesc"  /></span></li>
     <li><img src="images/slide/sample2.png" width="870" height="330" alt="sample" class="round" /><span class="title">karl text</span><span class="desc">Crazy Text</span></li>
     <li><img src="images/slide/sample3.png" width="870" height="330" alt="sample" class="round" /><span class="title">vgblv dfvd</span><span class="desc">Crazy Text</span></li>
  </ul>
  <div id="slideControl"></div>
  </div>
</div>

Answer 1

I fixed it using the jQuery Cycle Plugin. Much cleaner and very flexible!

$(document).ready(function() {

    function fadeTextIn() {
        $(this).find('.title').stop().fadeIn(1000, function() {
            $('.desc').stop().fadeIn(1000);
        });
    }

    function fadeTextOut() {
        $('.title').stop().hide();
        $('.desc').stop().hide();
    }

    $('#slider').after('<div id="nav" class="inactive">').cycle({
        fx: 'fade',
        speed: 1000,
        timeout: 5000,
        pause: 1,
        pager: '#nav',
        onPageEvent: fadeTextOut,
        before: fadeTextOut,
        after: fadeTextIn
    });

    $('#nav a.inactive').click(function() {
        fadeTextOut();
    });

});