jquery 슬라이더 탐색 작동시키기

Question

슬라이더를 여러 인스턴스로 변경하지 않고 변경할 수 없습니다. 필요한 경우 특정 슬라이드에서 슬라이더를로드 할 수 있도록 링크를 클릭하고 싶습니다. 나는 모든 것을 시도했다. 미리 감사드립니다 :)

JS 바이올린 : 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

나는 jQuery Cycle Plugin을 사용하여 고정. 훨씬 더 깔끔하고 유연함!

$(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(); 
    }); 

});