자바 스크립트 슬라이더 자동 재생

Question

저는 아직 초보자이며 여전히 배우고 있으며 문제를 해결할 수 없습니다. 아래 코드를 가지고 슬라이더에 자동 재생 기능을 추가하고 싶습니다. 도움을 많이 주셔서 감사합니다.

$('.feature-selection').click(function() { 
     if (!$(this).hasClass('active-feature')) { 
      var featureID = '#' + $(this).attr('data-feature-id'); 
      $('.active-feature').removeClass('active-feature'); 
      $(this).addClass('active-feature'); 
      $('.active-feature-detail').addClass('fadeOutLeftBig'); 
      setTimeout(function() { 
       $('.fadeOutLeftBig').removeClass('active-feature-detail'); 
      }, 500); 
      setTimeout(function() { 
       $('.fadeOutLeftBig').removeClass('fadeOutLeftBig'); 
      }, 600); 
      $(featureID).addClass('fadeInRightBig'); 
      var that = featureID; 
      setTimeout(function() { 
       $(that).removeClass('fadeInRightBig'); 
      }, 1000); 
      $(featureID).addClass('active-feature-detail'); 
      var newFeatureHeight = $(featureID).height() + 88; 

      $('#feature-detail-holder').css('min-height', newFeatureHeight); 
     } 
    }); 

Answer 1

var interval = null; 
$('#autoplay-button').click(function(){ 
    interval = setInterval(function(){ 
     $('.feature-selection').trigger('click'); 
    }, 10000); 
}); 

$('#stop-autoplay-button').click(function(){ 
    clearInterval(interval); 
}); 

$('.feature-selection').click(function() { 
    if (!$(this).hasClass('active-feature')) { 
     var featureID = '#' + $(this).attr('data-feature-id'); 
     $('.active-feature').removeClass('active-feature'); 
     $(this).addClass('active-feature'); 
     $('.active-feature-detail').addClass('fadeOutLeftBig'); 
     setTimeout(function() { 
      $('.fadeOutLeftBig').removeClass('active-feature-detail'); 
     }, 500); 
     setTimeout(function() { 
      $('.fadeOutLeftBig').removeClass('fadeOutLeftBig'); 
     }, 600); 
     $(featureID).addClass('fadeInRightBig'); 
     var that = featureID; 
     setTimeout(function() { 
      $(that).removeClass('fadeInRightBig'); 
     }, 1000); 
     $(featureID).addClass('active-feature-detail'); 
     var newFeatureHeight = $(featureID).height() + 88; 

     $('#feature-detail-holder').css('min-height', newFeatureHeight); 
    } 
});